微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊，和多項(xiàng)點(diǎn)擊功能

2018-11-25 23:18:06 來(lái)源：互聯(lián)網(wǎng)作者：丶柯小暖 人氣： 次閱讀 1258 條評(píng)論

文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊，和多項(xiàng)點(diǎn)擊功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下...

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

效果圖

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í)一下了，其中的圖片可以自行下載，能看到效果就可以了。

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