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

效果图

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的解构赋值，不知道的小伙伴可以百度学习一下了，其中的图片可以自行下载，能看到效果就可以了。

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

微信小程序微信小程序