微信小程序實(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類實(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)文章

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