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

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

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

单选项目。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/component/radio.html" rel="nofollow">radio</a> 标识。当该<a href="https://developers.weixin.qq.com/miniprogram/dev/component/radio.html" rel="nofollow">radio</a> 选中时，<a href="https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html" rel="nofollow">radio-group</a> 的 change 事件会携带<a href="https://developers.weixin.qq.com/miniprogram/dev/component/radio.html" rel="nofollow">radio</a>的value</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">checked</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">当前是否选中</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">disabled</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否禁用</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">string</td> 
   <td align="left">#09BB07</td> 
   <td align="left">否</td> 
   <td align="left">radio的颜色，同css的color</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

[在开发者工具中预览效果][Link 1]

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)
      }
    })

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-20C17n18-1622438222465)(image-20210530093035726.png)\]][img-20C17n18-1622438222465_image-20210530093035726.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/s/tpbv9cmv6HYr
[img-20C17n18-1622438222465_image-20210530093035726.png]: /images/20210716/de1c17b6714f4503a502ef89778b1a6c.png