微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊功能
最近接觸到小程序,發(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; }
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 }) } });
代碼中用到了es6的解構(gòu)賦值,不知道的小伙伴可以百度學(xué)習(xí)一下了,其中的圖片可以自行下載,能看到效果就可以了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)點(diǎn)贊業(yè)務(wù)
- 小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能
- 小程序?qū)崿F(xiàn)列表點(diǎn)贊功能
- 微信小程序?qū)崿F(xiàn)列表頁的點(diǎn)贊和取消點(diǎn)贊功能
- 小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例
- 微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能
- 微信小程序基于本地緩存實(shí)現(xiàn)點(diǎn)贊功能的方法
- 微信小程序小組件 基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果
- 小程序animate動(dòng)畫實(shí)現(xiàn)直播間點(diǎn)贊
相關(guān)文章
微信小程序?qū)崿F(xiàn)圓形進(jìn)度條動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圓形進(jìn)度條動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JavaScript中Null與Undefined的區(qū)別解析
這篇文章主要介紹了JavaScript中Null與Undefined的區(qū)別解析,本文給出了多個(gè)代碼實(shí)例講解它們之間的區(qū)別,需要的朋友可以參考下2015-06-06js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題
這篇文章主要介紹了HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題,需要的朋友可以參考下2017-12-12js 時(shí)間格式與時(shí)間戳的相互轉(zhuǎn)換示例代碼
很多的新手朋友們對(duì)js中的時(shí)間格式與時(shí)間戳的轉(zhuǎn)換比較陌生,下面就為大家詳細(xì)介紹下具體的轉(zhuǎn)換步驟,感興趣的朋友可以參考下2013-12-12