微信小程序 實(shí)現(xiàn)點(diǎn)擊添加移除class
更新時間：2017年06月12日 10:25:50 投稿：lqh
這篇文章主要介紹了 微信小程序 實(shí)現(xiàn)點(diǎn)擊添加移除class的相關(guān)資料,需要的朋友可以參考下
微信小程序點(diǎn)擊添加移除class類實(shí)現(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)文章
async-await消滅異步回調(diào)實(shí)例詳解
這篇文章主要為大家介紹了async-await消滅異步回調(diào)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 聊天室簡單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 switch組件詳解及簡單實(shí)例 的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 form組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
js前端架構(gòu)Git?commit提交規(guī)范
這篇文章主要為大家介紹了前端架構(gòu)Git?commit提交規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 Button 組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
本地搭建微信小程序服務(wù)器的實(shí)現(xiàn)方法
這篇文章主要介紹了本地搭建微信小程序服務(wù)器的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家輕松的搭建自己的微信小程序的服務(wù)器，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 http請求詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JavaScript?history?對象詳解，history?對象表示當(dāng)前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因?yàn)?history?是?window?的屬性，所以每個?window?都有自己的?history?對象，更多詳細(xì)內(nèi)容請參考下面文章內(nèi)容2021-11-11
這篇文章主要介紹了微信小程序 Flex布局詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10