微信小程序实现循环点赞

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="data:image/fav{{item.collected?'_on':''}}.png" data-index='{{index}}'></image> <text>{{item.dzzs}}人想要</text> </view> </view> </view>
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
})
},

微信小程序实现循环点赞相关推荐

微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
微信小程序的爱心点赞
微信小程序的爱心点赞解决方法 heart.png是白色的心,heart-active.png是红心 <image bindtap="clickHeart" class=&q ...
微信小程序-for循环
微信小程序-for循环通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下: <view wx:for="{{arr}}">索引是:{{index ...
php 微信小程序循环多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
微信小程序for循环里面添加input事件
1,在微信小程序for循环里面添加input事件,并把input输入值添加到列表里面 2.wxml <view class="item" wx:for="{{lis ...
微信小程序—for循环包括自定义for循环中的item和index（图文）
微信小程序-for循环包括自定义for循环中的item和index <view wx:for="{{list}}" wx:key="{{index}}"& ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
微信小程序实现循环列表下拉功能（点击事件）
在微信小程序里有下拉功能如果循环列表当执行点击事件的时候就会同时执行.下面主要实现了循环列表的点击事件操作.(也有数据里面嵌套数据) wxml <view class="sele ...
php微信小程序如何无限点赞,小程序中点赞和收藏功能的实现代码
小程序中的点赞功能和收藏功能是必不可少的,那么该如何实现点赞和收藏两个功能呢?本篇文章将给大家分享小程序中的点赞功能和收藏功能的代码实现. 收藏功能:focusFavoriteTab: functio ...

微信小程序实现循环点赞

微信小程序实现循环点赞相关推荐

最新文章

热门文章