您的位置:首页 > 移动开发 > 微信开发

小程序—点击收藏功能

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'}}">

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: