小程序—点击收藏功能
2019-02-10 11:18
176 查看
最近整理了小程序中收藏功能的编写方法,因为未涉及到后端,所以我是通过小程序中的缓存来模拟此功能,废话不多说直接开干!
wxhm中的代码如下:
[code]<view> <image catch:tap="handleClickShow" wx:if="{{isShow}}" src="sc1.png" /> <image catch:tap="handleClickShow" wx:else src="sc2.png" /> </view>
view中包裹的是2张图片,一张是点赞之前的图片(sc1.png),一张是点赞之后的图片(sc2),同时也绑定了自定义事件handleClickShow,这里我使用了wx:if 和 wx:else来渲染到底显示哪一张图片(还有一种方法结尾有讲到)。
js是核心:
开始之前,我的思路是通过页面加载来获取缓存中的状态,这里先做一个判断如果缓存中没有值,加载时向缓存中添加状态false,(当然你不添加也可以,因为没点击收藏之前此状态就是false,但是要明白原理!),如果有值,获取缓存中的值,点击时取反,在渲染到页面。
js代码:
页面加载时,获取动态id,同时把id存到data中,执行getCollected来获取缓存中的值
[code]onLoad: function (options) { // 这块是获取点击详情的时候,通过options来接收的id let detId = options.id; let _this = this; _this.setData({ collectData : detId//把获取的id存到data中,当作一个变量供下边调用 }) _this.getCollected();//此方法是:页面加载时,获取缓存中的状态 },
获取缓存状态方法
[code]getCollected(){ let CollectState = wx.getStorageSync("_collect");//获取全部文章缓存状态 //这里我们做一个判断,如果缓存中有这个值,取到id对应在缓存中的状态,存到data中, //如果没有这个值,把id对应在缓存中的状态设置为false if(CollectState){// 判断如果缓存中有这个值 // 获取当前文章对应在缓存中的状态 let collcetState = CollectState[this.data.collectData]; this.setData({ isShow:collcetState//把这个状态存到data中 }) }else{ let CollectState= {}; CollectState[this.data.collectData] = false;//没有这个值,默认把点赞的这个状态设置为false, // 当然不设置false,它默认也是false,未选中的状态 wx.setStorageSync("_collect",CollectState); } },
点击收藏按钮显示收藏成功
[code]handleClickShow(event){ // 获取当前缓存中的所有状态 let getSecCollect = wx.getStorageSync("_collect"); // 获取当前页面的收藏按钮的状态 this.data.collectData就是当前的页面的id,在data中存储的 let getSecCollectState = getSecCollect[this.data.collectData]; // 然后当前收藏按钮的状态取反 getSecCollectState = !getSecCollectState; // 把取反的值的状态 在赋给 当前按钮的状态 getSecCollect[this.data.collectData] = getSecCollectState; wx.setStorageSync("_collect",getSecCollect)//在缓存中设置改变之后的状态 this.setData({ isShow:getSecCollectState//把更新过的收藏按钮的状态赋值给isShow }) },
判断是否显示哪一张图片也可以用三元表达式
[code]<image src="{{isPlayMusic?'1.png':'2.png'}}">
相关文章推荐
- 微信小程序中点击收藏类似功能
- 微信小程序(一)使用缓存实现收藏功能
- iOS UICollectionView 按钮点击变色(收藏点赞功能)实现
- Android实现软件列表的点击启动另外一个程序功能【附demo源码下载】
- Android中实现“再次点击退出程序”的功能
- 小白求助!!!请问Android 使用BroadCast实现强制下线功能,点击强制下线按钮,程序直接奔溃是为什么啊??
- 点击文字选中单选框/复选框 (模拟程序功能)
- 微信小程序 收藏功能实现
- asp.net中怎样实现设为首页和加入收藏的功能我用的是用LinkButton控件 点击Text为设为首页的LinkButton实现
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 微信小程序点击分享功能
- android listview子控件点击事件(点赞,收藏功能)
- 小程序中如何实现操作菜单的显示(点击选取图片,弹出菜单拍摄、相册)功能
- HTML-点击收藏功能模块
- 微信小程序收藏功能的实现代码
- 微信小程序开发入门第七章:收藏、评论、点赞及计数功能
- 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
- 微信小程序实现点击文字页面跳转功能【附源码下载】
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序webview实现长按点击识别二维码功能示例