微信小程式實現點贊、取消點贊，和多項點選功能

最近接觸到小程式，發現很有意思，在專案中遇到了一點小問題，就是點贊+取消點贊有些衝突，還有就是多項的點選，話不多說我們們直接上程式碼！

效果圖

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的解構賦值，不知道的小夥伴可以百度學習一下了，其中的圖片可以自行下載，能看到效果就可以了。

以上就是本文的全部內容，希望對大家的學習有所幫助。