微信小程序點(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)類(lèi)似php控制樣式類(lèi)名的語(yǔ)法。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽(tīng)的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽(tīng)的實(shí)例的相關(guān)資料,這里提供image觸摸并監(jiān)聽(tīng)的簡(jiǎn)單實(shí)例，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序 簡(jiǎn)單教程實(shí)例詳解的相關(guān)資料,這里對(duì)開(kāi)發(fā)微信小程序步驟做了一一詳解，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了TypeScript遍歷對(duì)象屬性的問(wèn)題，文章圍繞TypeScript遍歷對(duì)象屬性的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了JavaScript遞歸,遞歸就是當(dāng)一個(gè)函數(shù)可以調(diào)用自己，那么這個(gè)函數(shù)就是遞歸，接下倆我們就來(lái)看看下面文章的詳細(xì)介紹內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2021-12-12
微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
這篇文章主要介紹了微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解的相關(guān)資料,這里舉例說(shuō)明該如何實(shí)現(xiàn)和實(shí)例代碼，文章一一表述，需要的朋友可以參考下2016-11-11
uniApp學(xué)習(xí)之熱門(mén)搜索，搜索數(shù)據(jù)頁(yè)面緩存實(shí)例
這篇文章主要介紹了uniApp學(xué)習(xí)之熱門(mén)搜索,搜索數(shù)據(jù)頁(yè)面緩存實(shí)例,需要的朋友可以參考下2023-10-10
這篇文章主要介紹JS正則RegExp對(duì)象，正則表達(dá)式是描述字符模式的對(duì)象，用于對(duì)字符串模式匹配及檢索替換，是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。下面就來(lái)看具體詳情,需要的朋友可以參考一下2021-10-10
three.js-結(jié)合dat.gui實(shí)現(xiàn)界面可視化修改及調(diào)試詳解
這篇文章主要為大家介紹了three.js-結(jié)合dat.gui實(shí)現(xiàn)界面可視化修改及調(diào)試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了JavaScript?ES新特性塊級(jí)作用域，所謂的塊級(jí)作用域，就是該變量只能在聲明時(shí)的代碼塊或者子代碼塊中使用，使JavaScript出現(xiàn)了塊級(jí)作用域，具體詳細(xì)內(nèi)容請(qǐng)參考下面文章內(nèi)容2021-12-12
dotenv源碼解讀從.env文件中讀取環(huán)境變量
這篇文章主要為大家介紹了dotenv源碼解讀從.env文件中讀取環(huán)境變量示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12