下面来介绍小选择器、分三种样式:
<李>默认的自己可以定义数据的李
<李>模式="时间"是时间选择器李
<李>模式="日期"是日期选择器李
跟其他的一样先来看下picker.wxml
& lt;视图类=耙趁妗北?
& lt;视图类=皃age__hd”比;
& lt;文本类=" page__title "祝辞picker
& lt;文本类=" page__desc "祝辞选择器& lt;/text>
& lt;/view>
& lt;视图类=皃age__bd”比;
& 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>
& lt;/view>
& lt;/view>
之前
picker.wxss
页面{
background - color: # fbf9fe;
高度:100%;
}
.page__hd {
填充:100年50 rpx 50 rpx rpx 50 rpx;
text-align:中心;
}
.page__title {
显示:inline-block;
填充:20 rpx 40 rpx;
字体大小:32 rpx;
颜色:# AAAAAA;
边界底部:1 px固体# CCCCCC;
}
.page__desc {
显示:没有;
margin-top: 20 rpx;
字体大小:26 rpx;
颜色:# BBBBBB;
}
.section {
margin-bottom: 80 rpx;
}
.section__title {
margin-bottom: 16 rpx;
padding-left: 30 rpx;
padding-right: 30 rpx;
}
身边走动{
填充:26 rpx;
background - color: # FFFFFF;
}
之前
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
}）
}
}）
之前
演示地址,:WeAppDemo_jb51。rar
下面是页面展示
三种样式图:
1。默认的自己可以定义数据的
2。模式="时间"是时间选择器
3。模式="日期"是日期选择器
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
