微信小程序類似於點贊取消點贊計數功能

這個方法寫的是單篇文章的功能，有需要那種用於后台返回多條數據列表的點贊功能可以給我留言，大家探討

這個功能寫的目前是個假數據，直接上代碼

html

<view wx:for="{{shoucang}}" wx:key="{{index}}" data-index='{{item.id}}'>

<view wx:if="{{item.collected==1}}">

<icon catchtap='onCollectionTap1' data-index='{{index}}' style="font-size:19px" class="iconfont iconshoucang2"></icon>

<text class="text">收藏</text>

</view>

<view wx:else>

<icon catchtap='onCollectionTap1' data-index='{{index}}' style="font-size:19px;color:red;" class="iconfont iconshoucang1"></icon>

<text class="text">{{item.dzzs}}</text>

</view>

</view>

 

js中的data

shoucang: [{ dzzs: '22', collected: 1, id: 1 }],

 

js

 

// 更改點贊狀態

onCollectionTap1: function (event) {

// 獲取當前點擊下標

var index = event.currentTarget.dataset.index;

// data中獲取列表

var shoucang = this.data.shoucang;

for (let i in shoucang) { //遍歷列表數據

if (i == index) { //根據下標找到目標

var collectStatus = false

if (shoucang[i].collected == 0) { //如果是沒點贊+1

collectStatus = true

shoucang[i].collected = parseInt(shoucang[i].collected) + 1

shoucang[i].dzzs = parseInt(shoucang[i].dzzs) + 1

} else {

collectStatus = false

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

shoucang[i].dzzs = parseInt(shoucang[i].dzzs) - 1

}

wx.showToast({

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

})

}

}

this.setData({

shoucang: shoucang

})

},