当前位置 博文首页 > java1234的博客:微信小程序 单选项目 radio 组件

    java1234的博客:微信小程序 单选项目 radio 组件

    作者:[db:作者] 时间:2021-06-06 14:20

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

    单选项目。

    属性类型默认值必填说明最低版本
    valuestringradio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value1.0.0
    checkedbooleanfalse当前是否选中1.0.0
    disabledbooleanfalse是否禁用1.0.0
    colorstring#09BB07radio的颜色,同css的color1.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)
      }
    })
    

    运行效果:

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

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