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

Posted 2021-12-28 早起的年轻人

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;

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

• 手机点击查看 # 电脑点击查看
  

---

• 手机点击查看 # 电脑点击查看