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

最新推荐文章于 2025-06-20 23:44:18 发布

原创

最新推荐文章于 2025-06-20 23:44:18 发布 · 1.1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #radio #选中切换样式

本文介绍微信小程序中利用Radio选中状态切换样式的实现方法。通过判断radio-group中选中的项，为其添加'active'样式。在index.wxss中设置flex布局和'active'样式，在index.js中定义变量radioCheckVal记录选中radio的value，并监听事件以更新选中状态。

本篇文章主要讲解在微信小程序中如何根据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">