微信小程序點擊控件修改樣式實例詳解
更新時間：2017年07月07日 10:07:05 投稿：lqh
這篇文章主要介紹了 微信小程序點擊控件修改樣式實例詳解的相關資料,需要的朋友可以參考下
微信小程序點擊控件修改樣式實例詳解
現在要在微信小程序中實現點擊控件修改樣式，如下：
微信小程序中不支持直接操作dom，要實現這種效果，我們需要通過設置data，然后利用數據和界面的雙向綁定來實現它。
第一步：在wxss中定義被點擊和未被點擊的樣式，如下：
.service_selection .is_checked{
border: 1px solid #FE0002 ;
color: #FE0002 ;
background: #fff;
}
.service_selection .normal{
border: none;
color: #333;
background: #F0F1EC;
}
第二步：在js文件中的data中設置一個flag,叫他isChecked，默認isChecked==false。如下：
data: {
isChecked: false
}
第三步：在wxml文件中綁定點擊事件，
<view bindtap="serviceSelection"></view>
在js文件中實現這個方法，并另他點擊后設置isChecked==true。如下：
serviceSelection(){
this.setData({
isChecked:true
})
}
第四步：依然是在wxml文件中進行數據綁定：
<view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"></view>
重點是這一句代碼
{{isChecked?'is_checked':'normal'}}"
這是一個三目運算符，當isChecked==true時，在class加上is_checked的樣式，為flase時使用normal的樣式。這一點的實現類似php控制樣式類名的語法。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
微信小程序實現拖拽 image 觸摸事件監(jiān)聽的實例
這篇文章主要介紹了微信小程序實現拖拽 image 觸摸事件監(jiān)聽的實例的相關資料,這里提供image觸摸并監(jiān)聽的簡單實例，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序 簡單教程實例詳解的相關資料,這里對開發(fā)微信小程序步驟做了一一詳解，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了TypeScript遍歷對象屬性的問題，文章圍繞TypeScript遍歷對象屬性的相關資料展開詳細內容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了JavaScript遞歸,遞歸就是當一個函數可以調用自己，那么這個函數就是遞歸，接下倆我們就來看看下面文章的詳細介紹內容，需要的小伙伴可以參考一下，希望對你有所幫助2021-12-12
這篇文章主要介紹了微信小程序教程之本地圖片上傳(leancloud)實例詳解的相關資料,這里舉例說明該如何實現和實例代碼，文章一一表述，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了uniApp學習之熱門搜索,搜索數據頁面緩存實例,需要的朋友可以參考下2023-10-10
這篇文章主要介紹JS正則RegExp對象，正則表達式是描述字符模式的對象，用于對字符串模式匹配及檢索替換，是對字符串執(zhí)行模式匹配的強大工具。下面就來看具體詳情,需要的朋友可以參考一下2021-10-10
three.js-結合dat.gui實現界面可視化修改及調試詳解
這篇文章主要為大家介紹了three.js-結合dat.gui實現界面可視化修改及調試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了JavaScript?ES新特性塊級作用域，所謂的塊級作用域，就是該變量只能在聲明時的代碼塊或者子代碼塊中使用，使JavaScript出現了塊級作用域，具體詳細內容請參考下面文章內容2021-12-12
dotenv源碼解讀從.env文件中讀取環(huán)境變量
這篇文章主要為大家介紹了dotenv源碼解讀從.env文件中讀取環(huán)境變量示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12