以下将展示微信小程序之表单组件radio源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。 功能描述: 单选项目。 Bug & Tip 1.tip:若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项,该内置组件可能会出现非预期表现(详情参考enablePassiveEvent 文档) 属性说明: 示例代码 JAVASCRIPT: Page({ onShareAppMessage() { return { title: 'radio', path: 'page/component/pages/radio/radio' } }, data: { items: [ {value: 'CHN', name: '中国', checked: 'true'}, {value: 'BRA', 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 }) } }) WXML: <view class="page-body"> <view class="page-section"> <view class="page-section-title">默认样式</view> <label class="radio"> <radio value="r1" checked="true"/>选中 </label> <label class="radio"> <radio value="r2" />未选中 </label> </view> <view class="page-section"> <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> </view> </view>
版权声明: 本站所有内容均由互联网收集整理、上传,如涉及版权问题,请联系我们第一时间处理。 原文链接地址: https://developers.weixin.qq.com/miniprogram/dev/component/radio.html |
|
来自: MLC061 > 《微信小程序官方组件展示》