微信小程序单选框radio使用实例

最新推荐文章于 2024-08-01 21:41:04 发布

早起的年轻人

最新推荐文章于 2024-08-01 21:41:04 发布

阅读量3.1k

点赞数

分类专栏：微信小程序的开发锦囊文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/zl18603543572/article/details/121690011

版权

微信小程序的开发锦囊专栏收录该内容

32 篇文章 13 订阅

订阅专栏

radio 用来实现单选框效果，本文章效果如下：

在这里插入图片描述

1 wxml 文件中


<view class="tui-content">
  <radio-group class="radio-group" bindchange="radioChange">
    <label class="radio" wx:for="{{items}}">
      <view class="tui-menu-list"><radio color="#007aff" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
    </label>
  </radio-group>
  <view class="tui-show-name">
    {{radioStr}}
  </view>
</view>

2 js 文件中

// pages/radio/radio.js
Page({
  data: {
    items: [
      { name: 'test1', value: '测试一' },
      { name: 'test1', value: '测试二', checked: 'true' },
      { name: 'test1', value: '测试三' },
      { name: 'test1', value: '测试四' },
     
    ],
    radioStr: '测试二'
  },
  /**
   * 单选回调方法
   * @param {*} e 
   */
  radioChange: function (e) {
    var str = null;
    //获取当前选中的值 
    let selectValue =e.detail.value;
    //循环遍历
    for (var value of this.data.items) {
      if (value.name === selectValue) {
        str = value.value;
        break;
      }
    }
    //更新值显示
    this.setData({ radioStr: str });
  }
})

3 wxss 样式文件中

.tui-content{
  height: 100%;
  padding: 10px;
}
.tui-menu-list{
  line-height: 80rpx;
  color: #555;
  font-size: 35rpx;
  padding: 0 0rpx 0 10px;
  position: relative;
}