微信小程序实现点赞、取消点赞功能

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>

 

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

 

  })

 

 }

});