网站开发语言在线检测,手机网页浏览器,校园网络工程设计方案,平台网站建设价格这篇文章主要介绍了微信小程序基于本地缓存实现点赞功能的方法,涉及微信小程序界面布局、事件响应及缓存操作等相关实现技巧,需要的朋友可以参考下本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考#xff0c;具体如下#xff1a;wxml中的写法…这篇文章主要介绍了微信小程序基于本地缓存实现点赞功能的方法,涉及微信小程序界面布局、事件响应及缓存操作等相关实现技巧,需要的朋友可以参考下本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考具体如下wxml中的写法注意1. 使用wx:if{{condition}} wx:else实现图标的切换效果2. 为图片绑定点击事件bindtaptoCollect两个image标签都要绑定js中的写法Page({data: {},onLoad: function(option) {// 获取接收到的id值var getId option.id;// 让接收到的id值传递到data:{}里面this.setData({currentId: getId});// 读取所有的文章列表点赞缓存状态var cache wx.getStorageSync(cache_key);// 如果缓存状态存在if (cache) {// 拿到所有缓存状态中的1个var currentCache cache[getId];// 把拿到的缓存状态中的1个赋值给data中的collection如果当前文章没有缓存状态currentCache 的值就是 false如果当前文章的缓存存在那么 currentCache 就是有值的有值的说明 currentCache 的值是 truethis.setData({collection: currentCache})} else {// 如果所有的缓存状态都不存在 就让不存在的缓存存在var cache {};// 既然所有的缓存都不存在那么当前这个文章点赞的缓存也不存在我们可以把当前这个文章点赞的缓存值设置为 falsecache[getId] false;// 把设置的当前文章点赞放在整体的缓存中wx.setStorageSync(cache_key,cache);}},// 点击图片的点赞事件 这里使用的是同步的方式toCollect: function(event) {// 获取所有的缓存var cache wx.getStorageSync(cache_key);// 获取当前文章是否被点赞的缓存var currentCache cache[this.data.currentId];// 取反点赞的变成未点赞 未点赞的变成点赞currentCache !currentCache;// 更新cache中的对应的1个的缓存值使其等于当前取反的缓存值cache[this.data.currentId] currentCache;// 重新设置缓存wx.setStorageSync(cache_key,cache);// 更新数据绑定,从而切换图片this.setData({// collection 默认的是 falsecollection: currentCache});// 交互反馈wx.showToast({title: currentCache?点赞:取消,icon: success,duration: 2000});}})js中操作反馈—wx.showModal的写法// 点击图片的点赞事件 这里使用的是同步的方式toCollect: function(event) {// 获取缓存得到当前文章是否被点赞var cache wx.getStorageSync(cache_key);// 获取当前文章是否被点赞的缓存var currentCache cache[this.data.currentId];// 取反点赞的变成未点赞 未点赞的变成点赞currentCache !currentCache;// 更新cache中的对应的1个的缓存值使其等于当前取反的缓存值cache[this.data.currentId] currentCache;// 调用 showModal方法this.showModal(cache,currentCache);}showModal: function(cache,currentCache) {var that this;wx.showModal({title: 点赞content: currentCache?要点赞吗:要取消赞吗,showCancel: true,cancelText: 取消,cancelColor: #666,confirmText: 确定,confirmColor: #222,success: function(res) {if (res.confirm) {// 重新设置缓存wx.setStorageSync(cache_key,cache);// 更新数据绑定,从而切换图片that.setData({collection: currentCache})}}})}上面是我整理给大家的希望今后会对大家有帮助。相关文章
