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

wxml界面使用image标签

<image wx:if="{{collected}}" catchtap='onCollectionTap' src='/images/icon/collection.png'></image>    <image wx:else src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></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: '这是一个模态弹窗',   //  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() {  } })

相关推荐：

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

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

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