微信小程序：循环列表点赞功能实现

德顺

发布于 2019-11-13 17:07:20

2.4K0

发布于 2019-11-13 17:07:20

微信小程序实现循环列表的点赞和取消点赞功能。下面是代码部分：

WXML：

<view class='page_container'>
  <view class='good-item' wx:for='{{goodsList}}'>
    <image class='good-img' src='{{item.img}}' mode='widthFix'></image>
    <view class='fav-box'>
      <!-- 收藏过否 -->
      <image class='fav-icon' catchtap='onCollectionTap' src="image/fav{{item.collected?'_on':''}}.png" data-index='{{index}}'></image>
      <text>{{item.dzzs}}人想要</text>
    </view>
  </view>
</view>

goodsList 是商品列表，通过判断 collected 的值来更换图片，当然也可以拓展一下，把文字的颜色也修改了。

给元素绑定一个事件，点击时进行点赞/取消点赞的操作，并弹出相应的提示。

JS：

data: {
  goodsList: [{
      img: 'image/mi.jpg',
      dzzs: '22',
      collected: 1,
      id: 1
    },
    {
      img: 'image/mi.jpg',
      dzzs: '33',
      collected: 0,
      id: 2
    },
  ],
},
// 更改点赞状态
onCollectionTap: function(event) {
  // 获取当前点击下标
  var index = event.currentTarget.dataset.index;
  // data中获取列表
  var message = this.data.goodsList;
  for (let i in message) { //遍历列表数据
    if (i == index) { //根据下标找到目标
      var collectStatus = false
      if (message[i].collected == 0) { //如果是没点赞+1
        collectStatus = true
        message[i].collected = parseInt(message[i].collected) + 1
      } else {
        collectStatus = false
        message[i].collected = parseInt(message[i].collected) - 1
      }
      wx.showToast({
        title: collectStatus ? '收藏成功' : '取消收藏',
      })
    }
  }
  this.setData({
    goodsList: message
  })
},

效果图：