最近接觸到小程序，發(fā)現(xiàn)很有意思，在項(xiàng)目中遇到了一點(diǎn)小問題，就是點(diǎn)贊+取消點(diǎn)贊有些沖突，還有就是多項(xiàng)的點(diǎn)擊，話不多說咱們直接上代碼！

效果圖

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的解構(gòu)賦值，不知道的小伙伴可以百度學(xué)習(xí)一下了，其中的圖片可以自行下載，能看到效果就可以了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。