微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果

本篇文章给大家带来的内容是关于微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

wxml界面使用image标签<image wx:if="{{collected}}" catchtap='onCollectionTap' alt="微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果" src='/images/icon/collection.png'></image><image wx:else alt="微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果" src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></image>js文件上的脚本：// pages/post_detail/post_detail.jsvar postData = require("../../data/posts_data.js")Page({ /*** 页面的初始数据*/ data: { }, /*** 生命周期函数--监听页面加载*/ onLoad: function(options) {var postId = options.id;this.data.currentPostId = postIdvar 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")//缓存的上限最大不能超过10MBwx.clearStorageSync();console.log("onShareTap"); }, /*** 生命周期函数--监听页面初次渲染完成*/ onReady: function() { }, /*** 生命周期函数--监听页面显示*/ onShow: function() { }, /*** 生命周期函数--监听页面隐藏*/ onHide: function() { }, /*** 生命周期函数--监听页面卸载*/ onUnload: function() { }, /*** 页面相关事件处理函数--监听用户下拉动作*/ onPullDownRefresh: function() { }, /*** 页面上拉触底事件的处理函数*/ onReachBottom: function() {console.log("到底了"); }, /*** 用户点击右上角分享*/ onShareAppMessage: function() { }})

相关推荐：

微信小程序实例：如何实现滑动选择器（附代码）

微信小程序页面跳转的方法（附代码）

以上就是微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果的详细内容，更多请关注小潘博客其它相关文章！