微信小程序实现收藏与取消收藏切换图片功能

2018-09-26 20:08

阅读：620

　　wxml界面使用image标签

　　js文件上的脚本：

　　 // pages/post_detail/post_detail.js var postData = require(../../data/posts_data.js) Page({ /** * 页面的初始数据 */ 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: 这是一个模态弹窗firm) { // 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() { } })