视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序实现列表页的点赞和取消点赞功能
2020-11-27 22:05:28 责编:小采
文档


今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下:

/*更新点赞*/ 
 update_zan:function(e){ 
 var that = this; 
 var data = e.currentTarget.dataset; 
 var mid = data.mid; 
 var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid 
 var isadd = 1; 
 var newmessage = []; 
 if (cookie_mid.includes(mid)){//说明已经点过赞,取消赞 
 isadd = 0; 
 var m = 0; 
 for (var j in cookie_mid){ 
 if(cookie_mid[j] != mid){ 
 newmessage[m] = cookie_mid[j]; 
 m++ 
 } 
 } 
 wx.setStorageSync('zan', newmessage);//删除取消赞的mid 
 }else{ 
 cookie_mid.unshift(mid); 
 wx.setStorageSync('zan', cookie_mid);//新增赞的mid 
 } 
 wx.request({ 
 url: app.globalData.api.api_system, 
 data: { 
 action: 'zannum', 
 mid: mid, 
 isadd: isadd, 
 wxid: app.globalData.wxid 
 }, 
 method: 'GET', 
 // header: {}, 
 success: function (res) { 
 var message = that.data.message; 
 for (var i in message) { 
 if(message[i].mid == mid){ 
 if(isadd){ 
 message[i].zan = parseInt(message[i].zan) + 1 
 }else{ 
 message[i].zan = parseInt(message[i].zan) - 1 
 } 
 
 } 
 } 
 that.setData({ 
 message: message 
 }) 
 } 
 }) 

重点注意代码:

(1)要把所有已经点过赞的留言id给存储到本地缓存之中,这样如果重复点赞的,就可以判断出来,并取消点赞,取消点赞的同时要去掉缓存中的id;
(2)新增点赞和取消点赞用到同一个api,通过isadd=1或者isadd=0来判断是新增还是取消点赞
(3)为了不频繁去读取留言列表,可以直接调用this.data.message,并通过循环遍历改变某个留言的点赞数,然后直接重新赋值,就能动态改变点赞数!

下载本文
显示全文
专题