微信小程序组件解读和分析:十radio单选项目

Posted 微信开发--51小程序

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序组件解读和分析:十radio单选项目相关的知识,希望对你有一定的参考价值。

radio单选项目组件说明:

radio:单选项目。

radio-group:

单项选择器,内部由多个<radio/>组成。

 

radio单选项目示例代码运行效果如下:

技术分享

 

 

 

下面是WXML代码:

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<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">
        <label class="radio" wx:for="{{items}}">
          <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
      </radio-group>
    </view>
  </view>
</view>



下面是JS代码:

[javascript纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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)
  }
})



下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.radio {
  display: block;
  margin-bottom: 20rpx;
}
.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}



radio单选项目的主要属性:

radio-group:

 

属性名
类型
默认值
说明
bindchange EventHandle   <radio-group/>中的选中项发生变化时触发change事件,event.detail = {value: 选中项radio的value}

 

radio:

 

 

属性名
类型
默认值
说明
value String   <radio/>标识。当该<radio/>选中时,<radio-group/>的change事件会携带<radio/>的value
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用

点击查看原文







以上是关于微信小程序组件解读和分析:十radio单选项目的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序组件解读和分析:十switch 开关选择器

微信小程序组件解读和分析:十input输入框

微信小程序组件解读和分析:十picker滚动选择器

微信小程序组件解读和分析:十label标签

微信小程序组件解读和分析:九form表单

微信小程序组件解读和分析:text文本