微信小程序開發(fā)極速實戰(zhàn)：picker滾動選擇器課件

1、微信小程序開發(fā)組件：組件說明：picker：滾動選擇器，現(xiàn)支持三種選擇器，通過mode屬性來區(qū)分，分別是普通選擇器(mode = selector)，時間選擇器(mode = time)，日期選擇器(mode = date)，默認是普通選擇器。 wxml picker 選擇器 地區(qū)選擇器 當前選擇：arrayindex 時間選擇器 當前選擇: time 日期選擇器 當前選擇: date jsPage( data: array: 中國, 美國, 巴西, 日本, index: 0, date: 2016-09-01, time: 12:01 , bindPickerChange: function

2、(e) console.log(picker發(fā)送選擇改變，攜帶值為, 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.page min-height: 100%; flex: 1; background-color: #FBF9FE; font-size: 3

3、2rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; overflow: hidden;.page_hd padding: 50rpx 50rpx 100rpx 50rpx; text-align: center;.page_title display: inline-block; padding: 20rpx 40rpx; font-size: 32rpx; color: #AAAAAA; border-bottom: 1px solid #CCCCCC;.page_desc display: n

4、one; margin-top: 20rpx; font-size: 26rpx; color: #BBBBBB;.picker padding: 26rpx; background-color: #FFFFFF;.section margin-bottom: 80rpx;.section_title margin-bottom: 16rpx; padding-left: 30rpx; padding-right: 30rpx;主要屬性：普通選擇器：(mode = selector)屬性名類型默認值說明rangeArray mode為 selector 時，range 有效valueNumbe

5、r0mode為 selector 時，是數(shù)字，表示選擇了 range 中的第幾個，從0開始。bindchangeEventHandle向右添加列value改變時觸發(fā)change事件，event.detail = value: value時間選擇器：(mode = time)屬性名類型默認值說明valueString表示選中的時間，格式為”hh:mm”startString表示有效時間范圍的開始，字符串格式為”hh:mm”endString表示有效時間范圍的結(jié)束，字符串格式為”hh:mm”bindchangeEventHandlevalue改變時觸發(fā)change事件，event.detail = value: value日期選擇器：(mode = date)屬性名類型默認值說明valueString0表示選中的日期，格式為”YYYY-MM-DD”startString表示有效日期范圍的開始，字符串格式為”YYYY-MM-DD”endString表示有效日期范圍的結(jié)束，字符串格式為”YYYY-MM-DD”fieldsStringday有效值ye