小菜鸟一个，希望各位大神不要往死喷，小弟这里先谢过了
最近接触到小程序，发现很有意思，在项目中遇到了一点小问题，就是点赞+取消点赞有些冲突，还有就是多项的点击，话不多说咱们直接上代码！！！！！

效果图

wxml

 <block wx:for="{{msg}}"><image class='imgList'  hidden='{{item.show}}' bindtap='zan' data-index='{{index}}' src='../resizeApi.png'></image><image class='imgList'  hidden='{{!item.show}}' bindtap='zan' data-index='{{index}}' src='../resizeApi (1).png'></image><text> {{item.show}}</text></block>

wxss

.imgList{height: 150rpx;width: 150rpx;
}

js

Page({data: {msg: [{ 'show': true },{ 'show': false },{ 'show': false },{ 'show': false },{ 'show': false },{ 'show': false },{ 'show': false },{ 'show': false },]},zan: function (e) {const vm = this;const _index = e.currentTarget.dataset.index;let _msg = [...vm.data.msg]; // msg的引用_msg[_index]['show'] = !vm.data.msg[_index]['show'];vm.setData({msg: _msg})}
});

代码中用到了es6的解构赋值，不知道的小伙伴可以百度学习一下了，其中的图片可以自行下载，能看到效果就可以了，希望对大家有所帮助，谢谢。

微信小程序点赞+取消点赞多项点击相关推荐

微信小程序的爱心点赞
微信小程序的爱心点赞解决方法 heart.png是白色的心,heart-active.png是红心 <image bindtap="clickHeart" class=&q ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
微信小程序之短连接分享转发点击短连接就可以直接打开小程序某个页面
微信小程序之短连接分享转发点击短连接就可以直接打开小程序某个页面首先,小程序官网地址:https://developers.weixin.qq.com/miniprogram/dev/OpenA ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
【微信小程序】随机点名系统（点击开始滚动名字点击结束按钮结束滚动）
[微信小程序]随机点名系统(点击开始滚动名字点击结束按钮结束滚动) 1.效果图: 2.js代码 {Page({data:{condition: Math.floor(Math.random()*7+1 ...
微信小程序只允许触发一次点击事件(防止多次点击事件)
微信小程序只允许触发一次点击事件(防止多次点击事件) 超级简单容易理解可以让绑定的事件只触发一次 //.wxml <button bindtap="click1"> ...
php微信小程序如何无限点赞,小程序中点赞和收藏功能的实现代码
小程序中的点赞功能和收藏功能是必不可少的,那么该如何实现点赞和收藏两个功能呢?本篇文章将给大家分享小程序中的点赞功能和收藏功能的代码实现. 收藏功能:focusFavoriteTab: functio ...
微信小程序在tabBar某一项的右上角添加文本（购物车数量）
首先我们在进入小程序后,肯定是通过用户授权并获取到用户的openID的,或者说至少有那么一个用户信息字段(比如在数据库中的用户表里,有openID.ID等)是跟购物车挂钩的,否则怎么能知道是我的购物车 ...
H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...

微信小程序点赞+取消点赞多项点击

效果图

wxml

wxss

js

代码中用到了es6的解构赋值，不知道的小伙伴可以百度学习一下了，其中的图片可以自行下载，能看到效果就可以了，希望对大家有所帮助，谢谢。

微信小程序点赞+取消点赞多项点击相关推荐

最新文章

热门文章