### [微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果](https://www.prosaas.cn/article/17168)

**Published:** 2018-08-10T07:17:05

**Author:** 5201314

**Excerpt:** 本篇文章给大家带来的内容是关于微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果，有一定的参考价值，有需…

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

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() {
 }
})

![](https://img.php.cn/upload/article/000/000/009/d1018ac44406983a32cfb59c3451a754-0.png)

![](https://img.php.cn/upload/article/000/000/009/d1018ac44406983a32cfb59c3451a754-1.png)

![](https://img.php.cn/upload/article/000/000/009/d1018ac44406983a32cfb59c3451a754-2.png)

![](https://img.php.cn/upload/article/000/000/009/cf53e2af53008adb8ae0a0ec3029262d-3.png)

相关推荐：

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

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

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

**Categories:** 后端开发

---