radio组件
1.radio-group
在小程序中<radio/>不能单独使用,同一组<radio/>需要包含在一个<radio group/>中,这样才能形成一组单项选择按钮,<radio/>的选中态不能直接获取,需要通过<radio-group>的change事件进行获取。<radio-group>内部可以包含其他标签,且不受影响。bindchange:绑定<radio-group/>change事件,<radio-group/>中的选中项发生变化时触发change事件,event.detail={value:选中项radio的value}
2.radio
<radio/>是<radio-group/>中的一个单选按钮,属性如下:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | String | <radio> 标识。当该<radio> 选中时,<radio-group> 的 change 事件会携带<radio> 的value | ||
checked | Boolean | false | 当前是否选中 | |
disabled | Boolean | false | 是否禁用 | |
color | Color | radio的颜色,同css的color | ||
aria-label | String | 无障碍访问,(属性)元素的额外描述 2.5.0 |
示例代码如下:
<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>
Page({
data: {
items: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
]
},
radioChange(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
}
})
执行结果如下:
checkbox组件
与单选框一样,小程序中的复选也是由<checkbox-group/>(多项选择器)和<checkbox/>(多选项目)两个组件组合而成。
1.checkbox-group
用于包裹<checkbox/>,而且仅有一个属性bindchange:<checkbox-group>
中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]}
2.checkbox
<checkbox/>是<checkbox-group/>中的一个多选项目,它的属性和<radio/>一样:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | String | <checkbox> 标识,选中时触发<checkbox-group> 的 change 事件,并携带 <checkbox> 的 value | ||
disabled | Boolean | false | 是否禁用 | |
checked | Boolean | false | 当前是否选中,可用来设置默认选中 | |
color | Color | checkbox的颜色,同css的color | ||
aria-label | String | 无障碍访问,(属性)元素的额外描述 | 2.5.0 |
示例代码如下:
<checkbox-group bindchange="checkboxChange">
<label class='checkbox' wx:for='{{items}}'>
<checkbox value='{{item.name}}' checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
Page({
data:{
items:[
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' }
]
},
checckboxChange(e){
console.log('checkbox发生change事件,value为:',e.detail.value)
}
})
执行结果如下:
switch组件
<switch/>是一个可以在两种状态切换的开关选择器,现在很多APP都在使用,最常见的是IOS或Android开关,switch属性如下:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
checked | Boolean | false | 是否选中 | |
disabled | Boolean | false | 是否禁用 | |
type | String | switch | 样式,有效值:switch, checkbox | |
bindchange | EventHandle | checked 改变时触发 change 事件,event.detail={ value:checked} | ||
color | Color | switch 的颜色,同 css 的 color | ||
aria-label | String | 无障碍访问,(属性)元素的额外描述 |
示例代码如下:
<view class="body-view">
<switch checked bindchange='switchChange1'/>
<switch bindchange='switchChange2'/>
</view>
Page({
data:{
switchChange1(e){
console.log('switch1发生change事件,携带值为:',e.detail.value)
},
switchChange2(e){
console.log('switch1发生change事件,携带值为:', e.detail.value)
}
}
})
执行结果如下:
label组件
用来改进表单组件的可用性,使用for
属性找到对应的id
,或者将控件放在该标签下,当点击时,就会触发对应的控件。目前可以绑定的控件有<button/>、<checkbox/>、<radio/>、<switch/>,小程序中<label/>触发的规则有两种:
- 将控件放在标签内,当用户点击时触发中的第一个控件
- 设置<label/>的for属性,当用户点击时触发for属性对应的控件,for属性优先级高于内部控件
<label/>只有一个for属性,绑定控件的id,如下示例:
<view class="section">
<checkbox-group bindchange="checkboxchange">
<label>
<checkbox value='value-1'/>点击文案也能选中
</label>
</checkbox-group>
</view>
<view class='section'>
<label>
<switch/>点击文案切换开关
</label>
</view>
<view class='section'>
<view class='title'>选中元素内的第一个</view>
<checkbox-group>
<label>
<checkbox value='value-1'>第一个</checkbox>
<checkbox value='value-2'>第二个</checkbox>
<checkbox value='value-3'>第三个</checkbox>
<checkbox value='value-4'>第四个</checkbox>
</label>
</checkbox-group>
</view>
<view class='section'>
<view class='title'>for属性优先级大于内部属性</view>
<checkbox-group>
<label for='mycheckbox'>
<checkbox>内部元素</checkbox>
<checkbox>内部元素</checkbox>
</label>
</checkbox-group>
</view>
Page({
checkboxchange:function(event){
console.log(event.detail.value)
}
})
.section{font-size: 12px;padding: 20px 10px;border-top: solid 1px rgb(212, 122, 122);}
.section.title{padding: 5px 0;margin-bottom: 5px;display: block;}
.section input{border:solid 1px rgb(110, 15, 79);background-color: rgb(107, 49, 102)}
执行结果如下:
在实际项目中,一个<label/>尽量只包裹一个组件。
slider组件
滑动选择器时一种在移动端常用的交互组件,我们手机上的亮度调节就是一个滑动选择器,小程序中只提供了水平的滑动选择器,属性如下:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
min | Number | 0 | 最小值 | |
max | Number | 100 | 最大值 | |
step | Number | 1 | 步长,取值必须大于 0,并且可被(max - min)整除 | |
disabled | Boolean | false | 是否禁用 | |
value | Number | 0 | 当前取值 | |
color | Color | #e9e9e9 | 背景条的颜色(请使用 backgroundColor) | |
selected-color | Color | #1aad19 | 已选择的颜色(请使用 activeColor) | |
activeColor | Color | #1aad19 | 已选择的颜色 | |
backgroundColor | Color | #e9e9e9 | 背景条的颜色 | |
block-size | Number | 28 | 滑块的大小,取值范围为 12 - 28 | 1.9.0 |
block-color | Color | #ffffff | 滑块的颜色 | 1.9.0 |
show-value | Boolean | false | 是否显示当前 value | |
bindchange | EventHandle | 完成一次拖动后触发的事件,event.detail = {value: value} | ||
bindchanging | EventHandle | 拖动过程中触发的事件,event.detail = {value: value} | 1.7.0 | |
aria-label | String | 无障碍访问,(属性)元素的额外描述 | 2.5.0 |
示例如下:
<view class="section icon-wrapper">
<icon type='success'size="{{icon.size}}"style="opacity:{{icon.opacity/20}};"></icon>
</view>
<view class='section'>
<view>调整图标大小:</view>
<slider show-value max='100' min='10' step='5' value='{{icon.size}}' bindchange='changeSize'></slider>
</view>
<view class='section'>
<view>调整透明度:</view>
<slider show-valuemax="10" min="0" step="1" value="{{icon.opacity}}" bindchange="changeOpacity"></slider>
</view>
.section{padding: 10px;}
.section.icon-wrapper {height: 100px;font-size: 12px;}
Page({
data:{
icon:{
size:20,
opacity:8
}
},
/**改变大小 */
changeSize:function(e){
this.data.icon.size=e.detail.value;
this.setData(this.data);
},
/**改变透明度*/
changeOpacity:function(e){
this.data.icon.opacity=e.detail.value;
this.setData(this.data);
}
});
执行结果如下:
picker组件
<picker/>可以在屏幕底部弹出一个窗口,供用户在所提供的选择项中选择一个,<picker/>主要分为3种类型:普通选择器、时间选择器和日期选择器,但我们还会将一些其他选择器
1.普通选择器
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
range | Array / Object Array | [] | mode为 selector 或 multiSelector 时,range 有效 | |
range-key | String | 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | ||
value | Number | 0 | value 的值表示选择了 range 中的第几个(下标从 0 开始) | |
bindchange | EventHandle | value 改变时触发 change 事件,event.detail = {value: value} | ||
disabled | Boolean | false | 是否禁用 | |
bindcancel | EventHandle | 取消选择或点遮罩层收起 picker 时触发 | 1.9.90 |
示例代码如下:
<picker value="{{selectedIndex}}" range="{{list}}" bindchange="change">
<view class='picker'>
当前选中:{{list[selectedIndex]}}
</view>
</picker>
.picker{border:solid 1px #ddd;background-color: #fafafa;padding: 10px;}
Page({
data:{
list:[
'周杰伦',
'林宥嘉',
'华晨宇',
'beyond',
'DJ小可'
],
selectedIndex:0
},
change:function(e){
this.setData({
selectedIndex:e.detail.value
});
}
});
执行结果如下:
2.时间选择器
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | String | 表示选中的时间,格式为"hh:mm" | ||
start | String | 表示有效时间范围的开始,字符串格式为"hh:mm" | ||
end | String | 表示有效时间范围的结束,字符串格式为"hh:mm" | ||
bindchange | EventHandle | value 改变时触发 change 事件,event.detail = {value: value} | ||
bindcancel | EventHandle | 取消选择时触发 | 1.9.90 | |
disabled | Boolean | false | 是否禁用 |
实例代码入下:
<picker value="{{selectTime}}" mode="time" start="{{startTime}}" end="{{endTime}}" bindchange="change">
<view class='picker'>
当前选中:{{selectTime}}
</view>
</picker>
.picker{border:solid 1px #ddd;padding: 10px;}
Page({
data:{
startTime:"00:00",
endTime:"24:00",
selectTime:"11:30"
},
change:function(e){
this.setData({
selectTime:e.detail.value
})
}
});
执行结果如下:
3.日期选择器
value | String | 0 | 表示选中的日期,格式为"YYYY-MM-DD" | |
start | String | 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD" | ||
end | String | 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD" | ||
fields | String | day | 有效值 year,month,day,表示选择器的粒度 | |
bindchange | EventHandle | value 改变时触发 change 事件,event.detail = {value: value} | ||
bindcancel | EventHandle | 取消选择时触发 | 1.9.90 | |
disabled | Boolean | false | 是否禁用 |
fields 有效值:
值 | 说明 |
---|---|
year | 选择器粒度为年 |
month | 选择器粒度为月份 |
day | 选择器粒度为天 |
实例代码如下:
<picker value="{{selectDate}}" mode="date" start="{{startDate}}" end="{{endDate}}" filed="day" bindchange="change">
<view class='picker'>
当前选中:{{selectDate}}
</view>
</picker>
.picker{border:solid 1px #ddd;padding: 10px;}
Page({
data:{
startDate:"1990-01-01",
endDate:"2020-01-01",
selectDate:"2019-03-30"
},
change:function(e){
this.setData({
selectDate:e.detail.value
});
}
});
执行结果如下:
其他:
多列选择器:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
range | 二维Array / 二维Object Array | [] | mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]] | |
range-key | String | 当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | ||
value | Array | [] | value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始) | |
bindchange | EventHandle | value 改变时触发 change 事件,event.detail = {value: value} | ||
bindcolumnchange | EventHandle | 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 | ||
bindcancel | EventHandle | 取消选择时触发 | 1.9.90 | |
disabled | Boolean | false | 是否禁用 |
地区选择器:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | Array | [] | 表示选中的省市区,默认选中每一列的第一个值 | |
custom-item | String | 可为每一列的顶部添加一个自定义的项 | 1.5.0 | |
bindchange | EventHandle | value 改变时触发 change 事件,event.detail = {value: value, code: code, postcode: postcode},其中字段code是统计用区划代码,postcode是邮政编码 | ||
bindcancel | EventHandle | 取消选择时触发 | 1.9.90 | |
disabled | Boolean | false | 是否禁用 |
示例汇总代码如下:
<view class="section">
<view class="section__title">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">多列选择器</view>
<picker
mode="multiSelector"
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}"
>
<view class="picker">
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker
mode="time"
value="{{time}}"
start="09:01"
end="21:01"
bindchange="bindTimeChange"
>
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker
mode="date"
value="{{date}}"
start="2015-09-01"
end="2017-09-01"
bindchange="bindDateChange"
>
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">省市区选择器</view>
<picker
mode="region"
bindchange="bindRegionChange"
value="{{region}}"
custom-item="{{customItem}}"
>
<view class="picker">
当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
</view>
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange(e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value)
const data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
}
data.multiIndex[e.detail.column] = e.detail.value
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']
data.multiArray[2] = ['猪肉绦虫', '吸血虫']
break
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']
data.multiArray[2] = ['鲫鱼', '带鱼']
break
}
data.multiIndex[1] = 0
data.multiIndex[2] = 0
break
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫']
break
case 1:
data.multiArray[2] = ['蛔虫']
break
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥']
break
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']
break
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']
break
}
break
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼']
break
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼']
break
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎']
break
}
break
}
data.multiIndex[2] = 0
break
}
console.log(data.multiIndex)
this.setData(data)
},
bindDateChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
执行结果如下:
picker-view
<picker-view/>用于实现自定义滚动选择器,在<picker-view/>中我们能按自己意愿插入任意数量列,同时也能设置整个<picker-view/>样式,<picker-view-column/>用于创建列,<picker-view/>中仅可放置<picker-view-column/>,放置其他节点不会显示,属性如下:
性名 | 类型 | 说明 | 最低版本 |
---|---|---|---|
value | NumberArray | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。 | |
indicator-style | String | 设置选择器中间选中框的样式 | |
indicator-class | String | 设置选择器中间选中框的类名 | 1.1.0 |
mask-style | String | 设置蒙层的样式 | 1.5.0 |
mask-class | String | 设置蒙层的类名 | 1.5.0 |
bindchange | EventHandle | 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始) | |
bindpickstart | EventHandle | 当滚动选择开始时候触发事件 | 2.3.1 |
bindpickend | EventHandle | 当滚动选择结束时候触发事件 | 2.3.1 |
aria-label | String | 无障碍访问,(属性)元素的额外描述 | 2.5.0 |
示例代码如下:
<view>
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view
indicator-style="height: 50px;"
style="width: 100%; height: 300px;"
value="{{value}}"
bindchange="bindChange"
>
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
data: {
years,
year: date.getFullYear(),
months,
month: 2,
days,
day: 2,
value: [9999, 1, 1],
},
bindChange(e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
执行结果如下: