微信小程序 實(shí)現(xiàn)點(diǎn)擊添加移除class
更新時(shí)間：2017年06月12日 10:25:50 投稿：lqh
這篇文章主要介紹了 微信小程序 實(shí)現(xiàn)點(diǎn)擊添加移除class的相關(guān)資料,需要的朋友可以參考下
微信小程序點(diǎn)擊添加移除class類(lèi)實(shí)現(xiàn)動(dòng)態(tài)變化class
wxml：
<view class="location_bottom" hidden="" >
<view class="{{_num == 1?'add_citying':'add_city'}}" data-num = "1" bindtap="clickNum">北京</view>
<view class="{{_num == 2?'add_citying':'add_city'}}" data-num = "2" bindtap="clickNum">上海</view>
</view>
wxss:
.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size:
28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid; padding: 0 20rpx; align-items: center;display: -webkit-flex;}
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx
solid #ebebeb; color: #000000;margin-right: 20rpx; }
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center;
border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}
js:
Page({
data: {
_num: 0,
},
clickNum: function (e) {
console.log(e.target.dataset.num)
this.setData({
_num: e.target.dataset.num
})
},
onLoad: function (options) {
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
相關(guān)文章
JavaScript前端實(shí)現(xiàn)小說(shuō)分頁(yè)功能示例
這篇文章主要為大家介紹了JavaScript前端實(shí)現(xiàn)小說(shuō)分頁(yè)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了commander腳手架工具使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)
這篇文章主要為大家介紹了JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
JS前端使用canvas實(shí)現(xiàn)物體的點(diǎn)選示例
這篇文章主要為大家介紹了JS前端使用canvas實(shí)現(xiàn)物體的點(diǎn)選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript中MutationObServer監(jiān)聽(tīng)DOM元素詳情
這篇文章主要給大家分享的是?JavaScript中MutationObServer監(jiān)聽(tīng)DOM元素詳情，DOM的MutationObServer接口，可以在DOM被修改時(shí)異步執(zhí)行回調(diào)函數(shù)，我的理解就是可以監(jiān)聽(tīng)DOM修改。下面來(lái)看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家分享了5個(gè)JS高階函數(shù)，在JavaScript中，函數(shù)實(shí)際上也是一個(gè)數(shù)據(jù)，也就是說(shuō)函數(shù)也可以賦值給一個(gè)變量。本篇文章就來(lái)介紹一些JavaScript中的高階函數(shù)的用法，具有一定的參考價(jià)值,需要的朋友可以參考一下2021-12-12
微信小程序 教程之wxapp視圖容器 scroll-view
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 scroll-view的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 audio 組件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序 出現(xiàn)47001 data format error原因解決辦法
這篇文章主要介紹了微信小程序 出現(xiàn)47001 data format error原因解決辦法的相關(guān)資料,需要的朋友可以參考下2017-03-03
微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法
這篇文章主要介紹了 微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法的相關(guān)資料,希望大家通過(guò)本文能實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09