本文实例讲述了微信小程序选择组件简单用法。分享给大家供大家参考,具体如下:
选择滚动选择器,现支持三种选择器,通过模式来区分,分别是普通选择器(),时间选择器()日期选择器(),默认是普通选择器。
具体功能说明如下:
<>强普通选择器:模式选择器=
属性名
类型
默认值
说明
范围
数组
[]
模式为选择器时,范围有效
价值
数量
0
模式为选择器时,是数字,表示选择了范围中的第几个,从0开始。
bindchange
EventHandle
,
值改变时触发改变事件,<代码> event.detail={价值:价值}
<>强时间选择器:模式=时间
属性名
类型
默认值
说明
价值
字符串
,
表示选中的时间,格式为“
,开始
字符串
,
表示有效时间范围的开始,字符串格式为“
,结束
字符串
,
表示有效时间范围的结束,字符串格式为“
,bindchange
EventHandle
,
值改变时触发改变事件,<代码> event.detail={价值:价值}
<强>日期选择器:模式=日期
属性名
类型
默认值
说明
价值
字符串
0
表示选中的日期,格式为“
开始
字符串
,
表示有效日期范围的开始,字符串格式为“
结束
字符串
,
表示有效日期范围的结束,字符串格式为“
字段
字符串
一天
有效值年、月、日,表示选择器的粒度
bindchange
EventHandle
,
值改变时触发改变事件,<代码> event.detail={价值:价值}
示例代码如下:
picker.wxml:
& lt;视图类=敖凇北?
& lt;视图类=" section__title "在地区选择器& lt;/view>
& lt;选择bindchange=" bindPickerChange " value=" https://www.yisu.com/zixun/{{指数}}”范围=皗{数组}}”比;
& lt;视图类=把≡衿鳌北?
当前选择:{{数组(指数)}}
& lt;/view>
& lt;/picker>
& lt;/view>
& lt;视图类=敖凇北?
& lt;视图类=" section__title "祝辞时间选择器& lt;/view>
& lt;选择模式="时间" value=" https://www.yisu.com/zixun/{{时间}}”开始=?9:01”结束=?1:01 bindchange”=癰indTimeChange”比;
& lt;视图类=把≡衿鳌北?
当前选择:{{时间}}
& lt;/view>
& lt;/picker>
& lt;/view>
& lt;视图类=敖凇北?
& lt;视图类=皊ection__title”在日期选择器& lt;/view>
& lt;选择模式="日期" value=" https://www.yisu.com/zixun/{{日期}}”=?015-09-01”=?017-09-01”开始bindchange=癰indDateChange”比;
& lt;视图类=把≡衿鳌北?
当前选择:{{日期}}
& lt;/view>
& lt;/picker>
& lt;/view>
之前
picker.js:
页面({
数据:{
数组:[美国”、“中国”,“巴西”,“日本”),
指数:0,
日期:2016-09-01,
时间:“中午”
},
bindPickerChange:函数(e) {
控制台。日志(“选择发送选择改变,携带值为’,e.detail.value)
this.setData ({
指数:e.detail.value
})
},
bindDateChange:函数(e) {
this.setData ({
日期:e.detail.value
})
},
bindTimeChange:函数(e) {
this.setData ({
时间:e.detail.value
})
}
})
之前
简单样式布局picker.wxss:
.section {
显示:flex;
flex-direction:列;
填充:20 rpx 0 rpx;
颜色:# 333;
}
.section__title {
字体大小:40 rpx;
保证金:10 rpx 0 rpx;
}
之前
运行效果:
微信小程序选择组件简单用法示例【附演示源码下载】
