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