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

逃离我推掉我的手 2023-10-07 17:29 9阅读 0赞

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

![在这里插入图片描述][dc83310cf41d4ebab1ff8f2fbd225f8f.gif_pic_center]

##### 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;
    }

小编也写了几本书，如果你有兴趣可以去看看

*  [手机点击查看][Link 1] \# [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[dc83310cf41d4ebab1ff8f2fbd225f8f.gif_pic_center]: https://img-blog.csdnimg.cn/dc83310cf41d4ebab1ff8f2fbd225f8f.gif#pic_center
[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 4]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center