這篇文章主要介紹了詳解微信小程序Radio選中樣式切換的相關(guān)資料,需要的朋友可以參考下
詳解微信小程序Radio選中樣式切換
本篇文章主要講解在微信小程序中如何根據(jù)Radio選中來(lái)切換樣式。愛掏網(wǎng) - it200.com效果如下：
原理主要是通過(guò)判斷一個(gè)radio-group中哪個(gè)被選中，就讓它加上一個(gè)“active”的樣式。愛掏網(wǎng) - it200.com
代碼如下：
登錄后復(fù)制
index.wxml代碼中可以看到，首先隱藏radio的原始樣式，利用lable點(diǎn)擊來(lái)觸發(fā)radioCheckedChange事件監(jiān)聽函數(shù)。愛掏網(wǎng) - it200.com
/**index.wxss**/
radio-group{
width: 100%;
}
.flex_box{
display: flex;
width: 100%;
background: #eee;
}
.flex_item{
flex: 1;
text-align: center;
}
.flex_item label{
padding: 10px 0;
display: inline-block;
width: 50%;
}
.flex_item label.active{
color: red;
border-bottom: 2px solid red;
}
登錄后復(fù)制
index.wxss中，使用flex布局讓它們平分，并定義“active”樣式。愛掏網(wǎng) - it200.com
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
radioCheckVal:0
},
radioCheckedChange:function(e){
this.setData({
radioCheckVal:e.detail.value
})
}
})
登錄后復(fù)制
index.js中，定義一個(gè)接收radio選中值的變量radioCheckVal，當(dāng)監(jiān)聽事件被觸發(fā)時(shí)，記錄下被選中的radio value。愛掏網(wǎng) - it200.com
最重要的一點(diǎn)是這一句：
登錄后復(fù)制利用簡(jiǎn)單的判斷表達(dá)式，取data中被選中的radio,判斷當(dāng)==當(dāng)前radio value值時(shí)，為lable添加上“active”選中樣式。愛掏網(wǎng) - it200.com
以上就是微信小程序關(guān)于Radio選中樣式切換的實(shí)例詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！