【微信小程序】radio单选框(83_100)

143 阅读1分钟

在这里插入图片描述 UI布局:

<!--pages/radio/radio.wxml-->
<view class="page-section-title">默认样式</view>
    <label class="radio">
      <radio value="r1" checked="true"/>选中
    </label>
    <label class="radio">
      <radio value="r2" />未选中
    </label>

    <view class="page-section-title">推荐展示样式</view>
    <view class="weui-cells weui-cells_after-title">
      <radio-group bindchange="radioChange">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

          <view class="weui-cell__hd">
            <radio value="{{item.value}}" checked="true"/>
          </view>
          <view class="weui-cell__bd">{{item.name}}</view>
        </label>
      </radio-group>
    </view>

数据模型 & 控制器

// pages/radio/radio.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },
  radioChange(e) {
    console.log('radio发生change事件,携带value值为:', e.detail.value)

    const items = this.data.items
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value === e.detail.value
    }

    this.setData({
      items
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

功能描述

单选项目。

属性说明

属性 类型 默认值 必填 说明 最低版本 value string 否 radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value 1.0.0

checked boolean false 否 当前是否选中 1.0.0

disabled boolean false 否 是否禁用 1.0.0

color string #09BB07 否 radio的颜色,同 css 的color 1.0.0

好用的Api工具推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

本地运行,性能优越,高效,快捷

下面是一段smartApi使用介绍: 在这里插入图片描述

下载地址

pan.baidu.com/s/1WGaIDYQv…