【移動應用開發(fā)技術】微信小程序中Radio選中樣式切換如何實現(xiàn)

【移動應用開發(fā)技術】微信小程序中Radio選中樣式切換如何實現(xiàn)

在下給大家分享一下微信小程序中Radio選中樣式切換如何實現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！詳解微信小程序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點擊來觸發(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

//獲取應用實例

var

app

=

getApp()

Page({

data:

{

radioCheckVal:0

},

radioCheckedChange:function(e){

this.setData({

radioCheckVal:e.detail.value

})

}

})index.js中，定義一個接收radio選中值的變量radioCheckVal，當監(jiān)聽事件被觸發(fā)時，記錄下被選中的radiovalue。最重要的一點是這一句：<label

class="{{radioCheckVal==0?'active':''}}">人氣

<radio

value="0"

hidden="true"></rad