时间:2021-05-18
本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考,具体如下:
wxml中的写法
注意:
1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果;
2. 为图片绑定点击事件bindtap="toCollect",两个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 的值是 true this.setData({ collection: currentCache }) } else { // 如果所有的缓存状态都不存在 就让不存在的缓存存在 var cache = {}; // 既然所有的缓存都不存在,那么当前这个文章点赞的缓存也不存在,我们可以把当前这个文章点赞的缓存值设置为 false cache[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 默认的是 false collection: 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 }) } } })}希望本文所述对大家微信小程序开发有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考,具体如下:前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓
微信小程序清除缓存怎么实现?微信小程序怎么清除缓存?有一些用户表示微信小程序的缓存太多,想要清楚微信小程序缓存却不知道怎么去做,接下来小编为大家介绍微信小程
点赞功能是很多平台都会提供的一个功能,那么,我们要如何实现点赞和取消点赞呢?这篇文章总结了我在项目中实现点赞的方法。缓存vs数据库?首先我们要考虑的是数据要放到
微信私密赞怎么点赞?很多小伙伴都不想将点赞视频推送给好友,所以官方推出个私密赞功能,下面小编给大家带来微信视频号私密点赞教程,一起来看看吧!软件名称:微信V6.
现在不论什么年龄的人都在使用微信,微信的玩法也越来越多,微信红包、微信小程序、微信朋友圈等等功能都非常受大家欢迎,下面开淘网小编将为大家介绍如何玩微信点赞活