微信小程序组件解读和分析：十二、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}

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637480.html