微信小程序的单选风格切换实例详解

本文主要介绍关于微信小程序电台选择风格切换的详细信息。有需要的朋友可以参考一下。

微信小程序单选风格切换详解

本文主要讲解如何在微信小程序中根据单选切换风格。效果如下:

原理是通过判断radio -组中的哪一个被选中，让它添加一个“主动”样式。

代码如下:

& lt！--index.wxml-->& ltview class = & quot容器& quot& gt& ltradio -group bind change = & quot；单选检查更改& quot& gt& ltview class = & quotflex _ box & quot& gt& ltview class = & quotflex _ item & quot& gt& ltlabel class = & quot{{radioCheckVal==0？'主动& # 039；:''} } & quot& gt流行

/* * index . wxss * */radio -group { width:100%；} .flex_box{显示:flex；宽度:100%；背景:# eee} .flex _ item { flex:1；text-align:居中；} .flex _ item label { padding:10px 0；显示:inline -block；宽度:50%；} .flex _ item label . active { color:red；border-bottom: 2px纯红；}index.wxss，用flex layout平分，定义“主动”样式。

//index.js //获取应用实例varapp = getapp()page({ data:{ radiocheckval:0 }，radio check change:function(e){ this . setdata({ radio checkval:e . detail . value } } })index . js，定义一个接收radio选定值的变量radio checkval，记录触发监控事件时选定的radio值。

最重要的一点是这句话:

& ltlabel class = & quot{{radioCheckVal==0？'主动& # 039；:''} } & quot& gt流行

VIP推荐:22门课程，总价3725元。VIP会员免费。