详解微信小程序Radio选中样式切换_微信小程序radio样式改变 - CSDN文库

1.1k 浏览量更新于2023-05-29 评论收藏 44KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解微信小程序详解微信小程序Radio选中样式切换选中样式切换

详解微信小程序详解微信小程序Radio选中样式切换选中样式切换

本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下：

原理主要是通过判断一个radio-group中哪个被选中，就让它加上一个“active”的样式。

代码如下：代码如下：

<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点击来触发radioCheckedChange事件监听函数。

/**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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38534683

粉丝: 3
资源: 1021

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈