前端之家收集整理的这篇文章主要介绍了
微信小程序实现收藏与取消收藏切换图片功能，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
页面的初始数据
*/
data: {
},/**
* 生命周期
函数--监听
页面加载
*/
onLoad: function(options) {
var postId = options.id;
this.data.currentPostId = postId
var postsData = postData.postList[postId];
console.log(postsData);
// this.data.postData=postsData;
this.setData({
post_key: postsData
})
// var postsCollected={
// 1:"true",// 2:"false",// 3:"true",// }
// console.log(postData);
// 从缓存中读取所有的缓存状态
var postsCollected = wx.getStorageSync("posts_Collected")
//如果缓存为真，执行以下
代码
if (postsCollected) {
//读取其中一个缓存状态
var postsCollected = postsCollected[postId]
this.setData({
//将是否被收藏的状态上绑定到collected这个变量上
collected: postsCollected
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync("posts_Collected",postsCollected)
}
},onCollectionTap: function(event) {
//
获取缓存的
方法
var postsCollected = wx.getStorageSync('posts_Collected');
var postCollected = postsCollected[this.data.currentPostId];
console.log(postCollected);
//取反操作，收藏的话，点击变成未收藏，反之，变成收藏。
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
// //更新
文章是否收藏的缓存值。
// wx.setStorageSync('posts_Collected',postsCollected)
// //更新数据绑定变量,从而实现切换
图片。
// this.setData({
// collected: postCollected
// })
this.showModal(postsCollected,postCollected)
// wx.showToast({
// title: postCollected ? "收藏成功" : "取消收藏",// duration: 800,// icon: "success"
// })
// wx.showModal({
// title: '确定收藏',// content: '这是一个模态弹窗',// success: function (res) {
// if (res.confirm) {
// console.log('
用户点击确定')
// } else if (res.cancel) {
// console.log('
用户点击取消')
// }
// }
// })
console.log("onCollectionTap");
},//使用showModal API来实现界面上逻辑操作。
showModal: function(postsCollected,postCollected) {
//这个注意一下，由于this是在page下
调用的
方法，这里是在
自定义函数下，所有必须重新赋值到一个新的变量，才能重新使用，不明白的同学们，记住就行。
var ts = this;
wx.showModal({
title: '收藏',content: postCollected ? "收藏该
文章" : "取消收藏该
文章",success: function(res) {
if (res.confirm) {
wx.setStorageSync('posts_Collected',postsCollected)
//更新数据绑定变量,从而实现切换
图片。
ts.setData({
collected: postCollected
})
console.log('
用户点击确定')
} else if (res.cancel) {
console.log('
用户点击取消')
}
}
})
},// onCollectionTap: function(event) {
// var baoxue = wx.getStorageSync("key");
// console.log(baoxue);
// },onShareTap: function(event) {
// wx.removeStorageSync("key")
//缓存的上限最大不能超过10MB
wx.clearStorageSync();
console.log("onShareTap");
},/**
* 生命周期
函数--监听
页面初次渲染完成
*/
onReady: function() {
},/**
* 生命周期
函数--监听
页面显示
*/
onShow: function() {
},/**
* 生命周期
函数--监听
页面隐藏
*/
onHide: function() {
},/**
* 生命周期
函数--监听
页面卸载
*/
onUnload: function() {
},/**
*
页面相关事件处理
函数--监听
用户下拉动作
*/
onPullDownRefresh: function() {
},/**
*
页面上拉触底事件的处理
函数
*/
onReachBottom: function() {
console.log("到底了");
},/**
*
用户点击右上角
分享
*/
onShareAppMessage: function() {
}
})
