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

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

/*更新点赞*/ 
  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,并通过循环遍历改变某个留言的点赞数,然后直接重新赋值,就能动态改变点赞数!

你可能感兴趣的:(微信小程序,js)