微信小程序列表点赞功能

实现思路：

1.找到对应文章的id

2.前端利用缓存wx.setStorageSync或者在页面js中this.setData()保存列表中点赞的id

3.点赞和取消点赞对应点赞数改变

4.后台的数据要同步变化

 

 data:{
    newsList:[],    //列表数据
    iszan:[]        //点过赞的id集合
 }, 

 //页面加载初始化列表数据
 onload:function(){
    var that=this;
    //发送请求获取列表数据
    wx.request({
        url:'',
        data:{},
        method:'POST',
        header:{
            'content-type': 'application/x-www-form-urlencoded'
        },
        success:res=>{
            var iszan=that.data.iszan;
            //数据获取成功后，进行遍历，拿到所有已经点过赞的新闻id
            for(var i=0;i<res.data.info.length;i++){
                if(res.data.info[i].state='true'){    //根据自己的数据找到到已经点赞的
                    iszan.push(res.data.info[i].id)
                }
            }
            that.setData({
                iszan:iszan
            })
            wx.setStorageSync('zan', iszan);  
        }
    })
 },

 //点赞处理函数    
 zan:function(item_id){
    var that=this;
    var cookie_id=wx.getStorageSync('zan')||[];  //获取全部点赞的id
    for (var i = 0; i < that.data.newsList.length;i++){
      if (that.data.newsList[i].id==item_id){     //数据列表中找到对应的id
        var num=that.data.newsList[i].gtnum;      //当前点赞数
        if (cookie_id.includes(item_id)){         //已经点过赞了，取消点赞
          for(var j in cookie_id){
            if(cookie_id[j]==item_id){
              cookie_id.splice(j,1);  //删除取消点赞的id
            }
          }
          --num;  //点赞数减1
          that.setData({
            [`newsList[${i}].gtnum`]:num,         //es6模板语法，常规写法报错
            [`newsList[${i}.].state`]: 'false'    //我的数据中state为'false'是未点赞
          })
          wx.setStorageSync('zan', cookie_id);
          wx.showToast({
            title: "取消点赞!",
            icon: 'none'
          }) 
        }else{        //点赞操作
          
          ++num;    //点赞数加1
          that.setData({
            [`newsList[${i}].gtnum`]: num,
            [`newsList[${i}.].state`]: 'true'
          })
          cookie_id.unshift(item_id);   //新增赞的id
          wx.setStorageSync('zan', cookie_id);
          wx.showToast({
            title: "点赞成功!",
            icon: 'none'
          })
        }
        //和后台交互，后台数据要同步
        wx.request({
          url: 'url',
          data:{
            shareid:item_id
          },
          method:'POST',
          header:{
            'content-type': 'application/x-www-form-urlencoded'
          },
          success:res=>{
            console.log(res)
          }
        })
      }
    }
  },

  // 点赞函数  获取对应id
  thumbsup:function(e){
    var shareid = e.currentTarget.dataset.id;
    this.zan(shareid);
  }

  // wxml页面，我是用两张图片来实现点赞和未点赞的显示
  <block wx:for='{{newsList}}'>
    <view class='item-zan' bindtap='thumbsup' data-id='{{item.id}}'>
        <image src='/images/zan1.png' mode='widthFix' hidden="{{item.state=='true'}}"></image>    //未点赞
        <image src='/images/zan2.png' mode='widthFix' hidden="{{item.state=='false'}}"></image>    //点赞
    </view>
  </block>