小程序 列表式收藏

wxml:

 <view class='wish_list_box_collection' wx:if="{{item.collected==1}}">           <!-- 收藏过 -->          

<image  catchtap='onCollectionTap' src="../../images/index/collection_hover.png" data-index='{{index}}'></image>          

<text>{{item.dzzs}}人想要</text>        

</view>       

  <view class='wish_list_box_collection' wx:else>          

<!-- 未收藏 -->          

<image src='../../images/index/collection.png' catchtap='onCollectionTap' data-index='{{index}}'></image>          

<text>想要</text>        

</view>     

  </view>

js:

data:{

wishList:[       {         img: '../../images/index/wish.png',         dzzs: '22',         collected: 1,         id: 1       },      

{         img: '../../images/index/wish.png',         dzzs: '33',         collected: 0,         id: 2       },     

 {         img: '../../images/index/wish.png',         dzzs: '44',         collected: 1,         id: 3       },  

 {         img: '../../images/index/wish.png',         dzzs: '555',         collected: 1,         id: 4       },   

  {         img: '../../images/index/wish.png',         dzzs: '666',         collected: 0,         id: 5       },      

{         img: '../../images/index/wish.png',         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       

  } else {          

collectStatus = false          

message[i].collected = parseInt(message[i].collected) - 1        

}        

wx.showToast({          

title: collectStatus ? '收藏成功' : '取消收藏',         })       }     }   

  this.setData({       wishList: message     })   }

--------------------- 作者：旧梦空城人心凉 来源：CSDN 原文：https://blog.csdn.net/weixin_42087730/article/details/80688861 版权声明：本文为博主原创文章，转载请附上博文链接！