微信小程序 實現(xiàn)點擊添加移除class
更新時間：2017年06月12日 10:25:50 投稿：lqh
這篇文章主要介紹了 微信小程序 實現(xiàn)點擊添加移除class的相關(guān)資料,需要的朋友可以參考下
微信小程序點擊添加移除class類實現(xiàn)動態(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) {
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了JavaScript前端實現(xiàn)小說分頁功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了commander腳手架工具使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)
這篇文章主要為大家介紹了JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了JS前端使用canvas實現(xiàn)物體的點選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
JavaScript中MutationObServer監(jiān)聽DOM元素詳情
這篇文章主要給大家分享的是?JavaScript中MutationObServer監(jiān)聽DOM元素詳情，DOM的MutationObServer接口，可以在DOM被修改時異步執(zhí)行回調(diào)函數(shù)，我的理解就是可以監(jiān)聽DOM修改。下面來看看文章的詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家分享了5個JS高階函數(shù)，在JavaScript中，函數(shù)實際上也是一個數(shù)據(jù)，也就是說函數(shù)也可以賦值給一個變量。本篇文章就來介紹一些JavaScript中的高階函數(shù)的用法，具有一定的參考價值,需要的朋友可以參考一下2021-12-12
微信小程序 教程之wxapp視圖容器 scroll-view
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 scroll-view的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 audio 組件實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序 出現(xiàn)47001 data format error原因解決辦法
這篇文章主要介紹了微信小程序 出現(xiàn)47001 data format error原因解決辦法的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了 微信小程序之選項卡的實現(xiàn)方法的相關(guān)資料,希望大家通過本文能實現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09