小程序循环实现点赞功能

小程序循环实现点赞功能

代码量非常少，复制粘贴就能用，方便理解，就不说废话了，直接上代码。

.wxml

<view wx:for="{{imgs}}" wx:key="{{imgs}}">
<image bindtap="zan" data-index='{{index}}' style="width:50rpx;height:50rpx;" src="../../imgs/like{{item.zan?'_hover':''}}.png"></image>
</view>

图片在上方，注意图片路径和文件名第一张图片名：like.png第二张图片名：like_hover.png然后就是js

.js

Page({
  data: {
      imgs:[{
        id:1,
        zan:1
      },
      {
        id:2,
        zan:0
      },
      {
        id:3,
        zan:1
      },
      {
        id:4,
        zan:0
      }
      ]
  },
  zan: function (e) {
    var that = this
    var index = e.currentTarget.dataset.index;
    var message = this.data.imgs;
    for (let i in message) { //遍历列表数据
      if (i == index) { //根据下标找到目标
        var collectStatus = false
        if (message[i].zan == 0) { //如果是没点赞+1
          collectStatus = true
          message[i].zan = parseInt(message[i].zan) + 1
        } else {
          collectStatus = false
          message[i].zan = parseInt(message[i].zan) - 1
        }
        wx.showToast({
          title: collectStatus ? '点赞成功' : '取消点赞',
        })
      }
    }
    this.setData({
      imgs: message
    })
  }
})

代码量做的非常少，模拟后台传过来的数据进行点赞，方便理解，有什么问题欢迎评论留言，我会及时回复你的。