微信小程序实现点赞、取消点赞，和多项点击功能

最近接触到小程序，发现很有意思，在项目中遇到了一点小问题，就是点赞+取消点赞有些冲突，还有就是多项的点击，话不多说咱们直接上代码！

效果图

wxml

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

wxss

1. .imgList{
2.  height: 150rpx;
3.  width: 150rpx;
4. }

js

1. Page({
2.  
3.  data: {
4.   msg: [
5.    { 'show': true },
6.    { 'show': false },
7.    { 'show': false },
8.    { 'show': false },
9.    { 'show': false },
10.    { 'show': false },
11.    { 'show': false },
12.    { 'show': false },
13.   ]
14.  },
15.  zan: function (e) {
16.   const vm = this;
17.  
18.   const _index = e.currentTarget.dataset.index;
19.  
20.   let _msg = [...vm.data.msg]; // msg的引用
21.  
22.   _msg[_index]['show'] = !vm.data.msg[_index]['show'];
23.  
24.  
25.   vm.setData({
26.    msg: _msg
27.  
28.   })
29.  
30.  }
31. });

代码中用到了es6的解构赋值，不知道的小伙伴可以百度学习一下了，其中的图片可以自行下载，能看到效果就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助。