QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

微信小程序

微信小程序实现列表页的点赞和取消点赞功能!

 admin  2018-01-30 21:56:34
今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下:
  1. /*更新点赞*/ 
  2.   update_zan:function(e){  
  3.     var that = this;  
  4.     var data = e.currentTarget.dataset;  
  5.     var mid = data.mid;  
  6.     var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid  
  7.     var isadd = 1;  
  8.     var newmessage = [];  
  9.     if (cookie_mid.includes(mid)){//说明已经点过赞,取消赞  
  10.       isadd = 0;  
  11.       var m = 0;  
  12.       for (var j in cookie_mid){  
  13.         if(cookie_mid[j] != mid){  
  14.           newmessage[m] = cookie_mid[j];  
  15.           m++  
  16.         }  
  17.       }  
  18.       wx.setStorageSync('zan', newmessage);//删除取消赞的mid  
  19.     }else{  
  20.       cookie_mid.unshift(mid);  
  21.       wx.setStorageSync('zan', cookie_mid);//新增赞的mid  
  22.     }  
  23.     wx.request({  
  24.       url: app.globalData.api.api_system,  
  25.       data: {  
  26.         action: 'zannum',  
  27.         mid: mid,  
  28.         isadd: isadd,  
  29.         wxid: app.globalData.wxid  
  30.       },  
  31.       method: 'GET',  
  32.       // header: {},   
  33.       success: function (res) {  
  34.         var message = that.data.message;  
  35.         for (var i in message) {  
  36.           if(message[i].mid == mid){  
  37.             if(isadd){  
  38.               message[i].zan = parseInt(message[i].zan) + 1  
  39.             }else{  
  40.               message[i].zan = parseInt(message[i].zan) - 1  
  41.             }  
  42.               
  43.           }  
  44.         }  
  45.         that.setData({  
  46.           message: message  
  47.         })  
  48.       }  
  49.     }) 

重点注意代码:
(1)要把所有已经点过赞的留言id给存储到本地缓存之中,这样如果重复点赞的,就可以判断出来,并取消点赞,取消点赞的同时要去掉缓存中的id;
(2)新增点赞和取消点赞用到同一个api,通过isadd=1或者isadd=0来判断是新增还是取消点赞
(3)为了不频繁去读取留言列表,可以直接调用this.data.message,并通过循环遍历改变某个留言的点赞数,然后直接重新赋值,就能动态改变点赞数!
本文《微信小程序实现列表页的点赞和取消点赞功能!》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/xiaocheng/wxapp/731.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序