-----------支持作者請轉發本文-----------picker組件用于從列表中選擇一個item，效果有點像iOS的ActionSheet，從窗口的底部彈出，選擇一個item后關閉。picker可用于選擇普通的item，也可以用于選擇時間和日期。我們可以使用picker組件的mode屬性設置這3種列表方式。mode可以設置的值是selector、time和date。默認值時selector。其中selector表示普通的列表，time表示時間列表，date表示日期列表。bindchange屬性也是公用的，EventHandle類型， value改變時觸發change事件。mode屬性值為selector時需要設置的屬性

• range：數組類型，表示picker的數據源。默認值是元素個數為0的數組([])

• value：Number類型，表示選擇的item的索引，從0開始。默認值是0

mode屬性值為time時需要設置的屬性

• value：String類型，表示選中的時間，格式為“hh:mm”

• start：String類型，表示有效時間范圍的開始，字符串格式為“hh:mm”

• end：String類型， 表示有效時間范圍的結束，字符串格式為“hh:mm”

mode屬性值為date時需要設置的屬性

• ?value：String類型，默認值是0，表示選中的日期，格式為“YYYY-MM-DD”

• start：String類型，表示有效日期范圍的開始，字符串格式為“YYYY-MM-DD”

• end：String類型， 表示有效日期范圍的結束，字符串格式為“YYYY-MM-DD”

• fields：String類型，默認值時day，可設置的值包括year、month和day，表示選擇器顯示的日期例如，例如，如果設為month，日期選擇器只會顯示年和月，不會顯示日。

下面的布局代碼使用了3個picker組件演示了上述3種picker組件的使用方法。<view style="margin:20px"> <view style="margin-left:15px">地區選擇器view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view style="padding: 13px;"> 當前選擇：{{array[index]}} view> picker>view><view style="margin:20px"> <view style="margin-left:15px">時間選擇器view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view style="padding: 13px;"> 當前選擇: {{time}} view> picker>view><view style="margin:20px"> <view style="margin-left:15px">日期選擇器view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view style="padding: 13px;"> 當前選擇: {{date}} view> picker>view>顯示效果如圖1所示。

圖1 未顯示選擇列表的picker組件顯示效果點擊第1個picker組件，會彈出如圖2所示的列表，可上下滑動選擇item，然后點擊“確定”按鈕，會選中該item，并顯示在picker組件上。

圖2 普通picker選擇列表的效果點擊第2個picker組件，會彈出如圖3所示的時間選擇列表。

圖3? 時間選擇列表點擊第3個picker組件，會彈出如圖4所示的日期選擇列表。

圖4 日期選擇列表前面的布局代碼，在設置日期選擇列表時，未使用fields屬性，如果指定fields屬性，將改變日期的顯示粒度，例如，下面的布局代碼將fields屬性值設為year。<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" fields="year" > <view style="padding: 13px;"> 當前選擇: {{date}} view> picker>布局的顯示效果如圖5所示，選擇的結果也會以年的形式顯示。

圖5? 只顯示年的日期選擇列表對本文感興趣，可以加李寧老師微信公眾號(unitymarvel)：

關注? 極客起源? 公眾號，獲得更多免費技術視頻和文章。

總結

以上是生活随笔為你收集整理的滚动的组件_微信小程序开发实战（11）：滚动组件（picker）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。