詳解微信小程序Radio選中樣式切換
本篇文章主要講解在微信小程序中如何根據(jù)Radio選中來切換樣式。效果如下：
原理主要是通過判斷一個radio-group中哪個被選中，就讓它加上一個“active”的樣式。
代碼如下：
<!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <view class="flex_box"> <view class="flex_item"> <label class="{{radioCheckVal==0?'active':''}}">人氣 <radio value="0" hidden="true"></radio> </label> </view> <view class="flex_item"> <label class="{{radioCheckVal==1?'active':''}}"> 銷量 <radio value="1" hidden="true"></radio> </label> </view> <view class="flex_item"> <label class="{{radioCheckVal==2?'active':''}}"> 價格↑ <radio value="2" hidden="true"></radio> </label> </view> </view> </radio-group> </view> index.wxml代碼中可以看到，首先隱藏radio的原始樣式，利用lable點(diǎn)擊來觸發(fā)radioCheckedChange事件監(jiān)聽函數(shù)。
/**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; } index.wxss中，使用flex布局讓它們平分，并定義“active”樣式。
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { radioCheckVal:0 }, radioCheckedChange:function(e){ this.setData({ radioCheckVal:e.detail.value }) } }) index.js中，定義一個接收radio選中值的變量radioCheckVal，當(dāng)監(jiān)聽事件被觸發(fā)時，記錄下被選中的radio value。
最重要的一點(diǎn)是這一句：
<label class="{{radioCheckVal==0?'active':''}}">人氣 <radio value="0" hidden="true"></radio> </label> 利用簡單的判斷表達(dá)式，取data中被選中的radio,判斷當(dāng)==當(dāng)前radio value值時，為lable添加上“active”選中樣式。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點(diǎn)
疑難解答
