微信小程序?qū)崿F(xiàn)點贊、取消點贊功能
更新時間：2018年11月02日 15:54:12 作者：丶柯小暖
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點贊、取消點贊，和多項點擊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近接觸到小程序，發(fā)現(xià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í)一下了，其中的圖片可以自行下載，能看到效果就可以了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS 遮照層實現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圓形進度條動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
JavaScript中Null與Undefined的區(qū)別解析
這篇文章主要介紹了JavaScript中Null與Undefined的區(qū)別解析,本文給出了多個代碼實例講解它們之間的區(qū)別,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)精確到秒的倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
HTML5+JS+JQuery+ECharts實現(xiàn)異步加載問題
這篇文章主要介紹了HTML5+JS+JQuery+ECharts實現(xiàn)異步加載問題,需要的朋友可以參考下2017-12-12
矢量圖形最大的優(yōu)點是無論放大、縮小或旋轉(zhuǎn)等不會失真。在地圖中存在著大量的應(yīng)用，是地圖數(shù)據(jù)中非常重要的組成部分，這篇文章主要介紹了OpenLayers 3加載矢量地圖源的相關(guān)資料,需要的朋友可以參考下2021-12-12
很多的新手朋友們對js中的時間格式與時間戳的轉(zhuǎn)換比較陌生，下面就為大家詳細(xì)介紹下具體的轉(zhuǎn)換步驟，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了微信小程序Flex布局用法,深入淺出地羅列分析了flex彈性布局常見的屬性、功能及使用方法,需要的朋友可以參考下2019-04-04
彈出層效果大家在網(wǎng)站上經(jīng)常遇到此功能，下面小編給大家分享一段js代碼制作彈出層效果，代碼簡單易懂，非常不錯，需要的朋友參考下吧2016-12-12
本文給大家分享使用getDaysInOneMonth(year, month)方法獲取某個月的天數(shù)，方法超簡單，感興趣的朋友一起看看吧2018-05-05