微信小程序點擊控件修改樣式實例詳解

現在要在微信小程序中實現點擊控件修改樣式，如下：

微信小程序中不支持直接操作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文件中綁定點擊事件，

在js文件中實現這個方法，并另他點擊后設置isChecked==true。如下：

serviceSelection(){

this.setData({

isChecked:true

})

}

第四步：依然是在wxml文件中進行數據綁定：

重點是這一句代碼

{{isChecked?'is_checked':'normal'}}"

這是一個三目運算符，當isChecked==true時，在class加上is_checked的樣式，為flase時使用normal的樣式。這一點的實現類似php控制樣式類名的語法。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

總結

以上是生活随笔為你收集整理的wxss 点击样式_微信小程序点击控件修改样式实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。