微信小程序點(diǎn)擊控件修改樣式實(shí)例詳解
微信小程序點(diǎn)擊控件修改樣式實(shí)例詳解
現(xiàn)在要在微信小程序中實(shí)現(xiàn)點(diǎn)擊控件修改樣式，如下：
微信小程序中不支持直接操作dom，要實(shí)現(xiàn)這種效果，我們需要通過(guò)設(shè)置data，然后利用數(shù)據(jù)和界面的雙向綁定來(lái)實(shí)現(xiàn)它。
第一步：在wxss中定義被點(diǎn)擊和未被點(diǎn)擊的樣式，如下：
.service_selection .is_checked{
border: 1px solid #FE0002 ;
color: #FE0002 ;
background: #fff;
}
.service_selection .normal{
border: none;
color: #333;
background: #F0F1EC;
}
第二步：在js文件中的data中設(shè)置一個(gè)flag,叫他isChecked，默認(rèn)isChecked==false。如下：
data: {
isChecked: false
}
第三步：在wxml文件中綁定點(diǎn)擊事件，
<view bindtap="serviceSelection"></view>
在js文件中實(shí)現(xiàn)這個(gè)方法，并另他點(diǎn)擊后設(shè)置isChecked==true。如下：
serviceSelection(){
this.setData({
isChecked:true
})
}
第四步：依然是在wxml文件中進(jìn)行數(shù)據(jù)綁定：
<view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"></view>
重點(diǎn)是這一句代碼
{{isChecked?'is_checked':'normal'}}"
這是一個(gè)三目運(yùn)算符，當(dāng)isChecked==true時(shí)，在class加上is_checked的樣式，為flase時(shí)使用normal的樣式。這一點(diǎn)的實(shí)現(xiàn)類似php控制樣式類名的語(yǔ)法。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序 參數(shù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序 定義全局?jǐn)?shù)據(jù)、函數(shù)復(fù)用、模版等詳細(xì)介紹
這篇文章主要介紹了微信小程序 定義全局?jǐn)?shù)據(jù)、函數(shù)復(fù)用、模版等詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 WebSocket詳解及應(yīng)用的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 chooseImage選擇圖片或者拍照的相關(guān)資料,需要的朋友可以參考下2017-04-04
微信小程序 生命周期和頁(yè)面的生命周期詳細(xì)介紹
這篇文章主要介紹了微信小程序 生命周期和頁(yè)面的生命周期詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-01-01
JS控制表格隔行變色...2006-06-06
js封裝一個(gè)websocket實(shí)現(xiàn)及使用詳解
這篇文章主要為大家介紹了js封裝一個(gè)websocket實(shí)現(xiàn)示例及使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了pnpm對(duì)npm及yarn降維打擊原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了requestAnimationFrame使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序 輪播圖swiper詳解及實(shí)例（源碼下載）
這篇文章主要介紹了微信小程序 輪播圖swiper詳解及實(shí)例（源碼下載）的相關(guān)資料,實(shí)用小技巧自定義輪播圖swiper dots默認(rèn)樣式，需要的朋友可以參考下2017-01-01