codecamp

支付宝小程序扩展表单 单选框·AMRadio

单选框。具体用法和小程序框架中 radio 保持一致,在 radio 基础上做了样式的封装。

扫码体验

示例代码

{
 "defaultTitle": "am-radio",
 "usingComponents": {
   "am-radio": "mini-ali-ui/es/am-radio/index",
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/es/list/list-item/index"
 }
}
<view class="page">
 <view class="page-description">单选框</view>
 <view class="page-section">
   <view class="section section_gap">
     <form onSubmit="onSubmit" onReset="onReset">
       <view class="page-section-demo">
         <radio-group class="radio-group" onChange="radioChange" name="lib">
           <label class="radio" a:for="{{items}}" key="label-{{index}}">
             <am-radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
             <view style="display:inline-block;">{{item.desc}}</text>
           </label>
         </radio-group>
       </view>
       <view class="page-section-demo">
         <radio-group class="radio-group" onChange="radioChange" name="lib">
           <label class="radio" a:for="{{items1}}" key="label-{{index}}">
             <am-radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
             <view style="display:inline-block;">{{item.desc}}</text>
           </label>
         </radio-group>
       </view>
     </form>
   </view>
 </view>
</view>
.radio {
 display: flex; align-items: center;
}
.page-section-demo {
 padding: 24rpx;
}
Page({
 data: {
   items: [
     { checked: true, disabled: false, value: 'a', desc: '单选框-默认选中', id: 'checkbox1' },
     { checked: false, disabled: false, value: 'b', desc: '单选框-默认未选中', id: 'checkbox2' },
   ],
   items1: [
     { checked: true, disabled: true, value: 'c', desc: '单选框-默认选中disabled', id: 'checkbox3' },
   ],
 },
 radioChange() {
 },
});

属性

属性 类型 默认值 描述
value String - 组件值,选中时 change 事件会携带的 value。
checked Boolean false 当前是否选中,可用来设置默认选中。可选值:true、false。
disabled Boolean false 是否禁用。可选值:true、false。
id String - 与 label 组件的 for 属性组合使用。
支付宝小程序扩展表单 搜索框·SearchBar
支付宝小程序扩展表单 复选框·Am-checkbox
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }