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

更新時(shí)間：2018年11月02日 15:54:12 作者：丶柯小暖

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

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

效果圖

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>

wxss

.imgList{
 height: 150rpx;
 width: 150rpx;
}

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

  })

 }
});

代碼中用到了es6的解構(gòu)賦值，不知道的小伙伴可以百度學(xué)習(xí)一下了，其中的圖片可以自行下載，能看到效果就可以了。

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

您可能感興趣的文章:

相關(guān)文章

純js實(shí)現(xiàn)懸浮按鈕組件
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)懸浮按鈕組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
原生JS實(shí)現(xiàn)拖拽排序的示例代碼
說到拖拽，應(yīng)用場景不可謂不多。無論是打開電腦還是手機(jī)，第一眼望去的界面都是可拖拽的，靠拖拽實(shí)現(xiàn)APP或者應(yīng)用的重新布局，或者拖拽文件進(jìn)行操作文件。本文就將利用JS實(shí)現(xiàn)拖拽排序，需要的可以參考一下
2022-12-12
詳解JavaScript對數(shù)組操作（添加/刪除/截取/排序/倒序）
這篇文章主要介紹了JavaScript對數(shù)組操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
window.dialogArguments 使用說明
window.dialogArguments 使用說明，需要的朋友可以參考下。
2011-04-04
Bootstrap table右鍵功能實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap table右鍵功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果
這篇文章主要介紹了JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果,具有展開折疊層及實(shí)時(shí)顯示鼠標(biāo)坐標(biāo)位置的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
JavaScript Date對象詳解及時(shí)間戳和時(shí)間的相互轉(zhuǎn)換問題
這篇文章主要介紹了JavaScript Date對象詳解及時(shí)間戳和時(shí)間的相互轉(zhuǎn)換問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
JavaScript 獲得選中文本內(nèi)容的方法
今天希望實(shí)現(xiàn)一個(gè)，直接在網(wǎng)頁上選中文本，點(diǎn)擊收藏夾的鏈接（javascript）即可彈出新窗口（類似“百度搜藏”和“QQ書簽”），新窗口中的文本框即顯示了選中的文本。
2009-02-02
Echarts如何重新渲染實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于Echarts重新渲染的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-05-05
JavaScript輸出數(shù)據(jù)的多種方式小結(jié)
這篇文章主要介紹了 JavaScript 輸出數(shù)據(jù)的多種方式,包括使用彈出警告框、寫入 HTML 文檔、使用 innerHTML 寫入 HTML 元素、寫入瀏覽器控制臺,還講解了操作 HTML 元素的方法,需要的朋友可以參考下
2024-12-12