原生微信小程序缓存点击切换图片

最新推荐文章于 2025-08-08 19:30:00 发布

原创最新推荐文章于 2025-08-08 19:30:00 发布 · 483 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中实现收藏功能，通过利用本地缓存来记录用户的收藏状态，当用户点击收藏按钮时，会根据当前的收藏状态进行切换，并更新缓存中的收藏信息，同时展示相应的操作提示。

在这里插入图片描述

点击利用缓存实现收藏成功和取消收藏

onLoad: function (options) {
    var postsCollected = wx.getStorageSync('posts_collected')
    if(postsCollected){
      var postCollected = postsCollected[postId]
      this.setData({
        collected:postCollected
      })
    }else{
      var postsCollected = {}
      postsCollected[postId] = false;
      wx.setStorageSync('posts_collected', postsCollected)
    }
  },

onCollectonTap:function(event){
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.collId];
    console.log(postCollected)
    postCollected =! postCollected;
    postsCollected[this.data.collId] = postCollected;
    wx.setStorageSync('posts_collected', postsCollected);
    this.setData({
      collected:postCollected
    })
    wx.showToast({
      title: postCollected?"收藏成功":"取消成功",
    })
  },

<image wx:if="{{collected}}" catch:tap="onCollectonTap" src="/images/icon/mkk1.png"></image>
 <image wx:else catch:tap="onCollectonTap" src="/images/icon/mk1.png"></image>