微信小程序组件之picker 怎么代码中添加他的开始时间和结束时间
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序组件之picker 怎么代码中添加他的开始时间和结束时间相关的知识,希望对你有一定的参考价值。
参考技术A 安卓里面的时间控件与日期控件都是分开的,如果要同时使用的话用户体验度那肯定不好,整合了安卓中的时间与日期控件,可以同时显示出来方便用户进行选择,使用时只需要将文件导入项目中,再需要用到的地方使用如下代码微信小程序组件解读和分析:十picker滚动选择器
picker滚动选择器组件说明:
picker:
滚动选择器,现支持三种选择器,通过mode属性来区分,
分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),
默认是普通选择器。
picker滚动选择器示例代码运行效果如下:
下面是WXML代码:
[XML] 纯文本查看 复制代码
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
|
< view class = "page" > < view class = "page__hd" > < text class = "page__title" >picker</ text > < text class = "page__desc" >选择器</ text > </ view > < view class = "page__bd" > < 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 = "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 > </ view > |
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
Page({ data: { array: [ ‘中国‘ , ‘美国‘ , ‘巴西‘ , ‘日本‘ ], index: 0, date: ‘2016-09-01‘ , time: ‘12:01‘ }, bindPickerChange: function (e) { console.log( ‘picker发送选择改变,携带值为‘ , e.detail.value) this .setData({ index: e.detail.value }) }, bindDateChange: function (e) { this .setData({ date: e.detail.value }) }, bindTimeChange: function (e) { this .setData({ time: 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
36
37
|
.page { min-height : 100% ; flex: 1 ; background-color : #FBF9FE ; font-size : 32 rpx; font-family : -apple-system-font, Helvetica Neue, Helvetica , sans-serif ; overflow : hidden ; } .page__hd{ padding : 50 rpx 50 rpx 100 rpx 50 rpx; text-align : center ; } .page__title{ display : inline- block ; padding : 20 rpx 40 rpx; font-size : 32 rpx; color : #AAAAAA ; border-bottom : 1px solid #CCCCCC ; } .page__desc{ display : none ; margin-top : 20 rpx; font-size : 26 rpx; color : #BBBBBB ; } .picker{ padding : 26 rpx; background-color : #FFFFFF ; } .section{ margin-bottom : 80 rpx; } .section__title{ margin-bottom : 16 rpx; padding-left : 30 rpx; padding-right : 30 rpx; } |
picker滚动选择器的主要属性:
普通选择器:(mode = selector)
属性名
|
类型
|
默认值
|
说明
|
range | Array | [ ] | mode为 selector 时,range 有效 |
value | Number | 0 | mode为 selector 时,是数字,表示选择了 range 中的第几个,从0开始。 |
bindchange | EventHandle | value改变时触发change事件,event.detail = {value: value} |
时间选择器:(mode = time)
属性名
|
类型
|
默认值
|
说明
|
value | String | 表示选中的时间,格式为”hh:mm” | |
start | String | 表示有效时间范围的开始,字符串格式为”hh:mm” | |
end | String | 表示有效时间范围的结束,字符串格式为”hh:mm” | |
bindchange | EventHandle | value改变时触发change事件,event.detail = {value: value} |
日期选择器:(mode = date)
属性名
|
类型
|
默认值
|
说明
|
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} |
以上是关于微信小程序组件之picker 怎么代码中添加他的开始时间和结束时间的主要内容,如果未能解决你的问题,请参考以下文章