微信小程序单选项目 radio 组件-蒲公英云

微信小程序单选项目 radio 组件

灰太狼 2021-09-08 01:38 460阅读 0赞

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

单选项目。

属性	类型	默认值	必填	说明	最低版本
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

示例代码

在开发者工具中预览效果

index.wxml

<view class="page">
    <view class="page__hd">
        <text class="page__title">radio</text>
        <text class="page__desc">单选框</text>
    </view>
    <view class="page__bd">
        <view class="section section_gap">
            <radio-group class="radio-group" bindchange="radioChange">
                <radio class="radio" wx:for-items="{ {items}}" wx:key="name" value="{ {item.name}}" checked="{ {item.checked}}">
                    <text>{
   {item.value}}</text>
                </radio>
            </radio-group>
        </view>
    </view>
</view>

index.js

Page({ 
  data: { 
    items: [
      {  name: 'USA', value: '美国' },
      {  name: 'CHN', value: '中国', checked: 'true' },
      {  name: 'BRA', value: '巴西' },
      {  name: 'JPN', value: '日本' },
      {  name: 'ENG', value: '英国' },
      {  name: 'FRA', value: '法国' },
    ]
  },
  radioChange: function (e) { 
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})