小程序点赞功能制作--列表

1.通过wx:if和wx:else进行图标切换

<block wx:for="{{wishList}}" wx:key="{{index}}">
  <view class="item" data-index='{{item.id}}'>
    <view class='wish_list_box_collection' wx:if="{{item.collected==1}}">
      <!-- 点赞过 -->
      <image catchtap='onCollectionTap' src="../../images/icon/wardrobe.png" data-index='{{index}}'></image>
      <text>{{item.dzzs}}</text>
    </view>
    <view class='wish_list_box_collection' wx:else>
      <!-- 未点赞 -->
      <image src='../../images/icon/wx_app_like.png' catchtap='onCollectionTap' data-index='{{index}}'></image>
      <text>{{item.dzzs}}</text>
    </view>
  </view>
</block>

2.给两个图片都绑定catchtap='onCollectionTap'实践

添加基本样式

.item {
  padding: 20rpx;
  border: 1rpx solid red;
}

.wish_list_box_collection image {
  width: 40rpx;
  height: 40rpx;
  overflow: hidden;
}

设置初始数据collected为1,则表示已点赞；0表示未点赞，dzzs为点赞数

Page({

data: {
    wishList: [
      {dzzs: '22', collected: 1, id: 1},
      {dzzs: '33', collected: 0, id: 2},
      {dzzs: '44', collected: 1, id: 3},
      {dzzs: '555', collected: 1, id: 4},
      {dzzs: '666', collected: 0, id: 5},
      {dzzs: '777', collected: 0, id: 6}
    ],
  },

// 更改点赞状态
  onCollectionTap: function(event) {
    // 获取当前点击下标
    var index = event.currentTarget.dataset.index;
    // data中获取列表
    var message = this.data.wishList;
    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
          message[i].dzzs = parseInt(message[i].dzzs) + 1
        } else {
          collectStatus = false
          message[i].collected = parseInt(message[i].collected) - 1
          message[i].dzzs = parseInt(message[i].dzzs) - 1
        }
        wx.showToast({
          title: collectStatus ? '收藏成功' : '取消收藏',
        })
      }
    }
    this.setData({
      wishList: message
    })
  }