微信小程序列表点赞功能

实现思路:

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>

 

评论 3 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

_Jester

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值