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

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

• value：Number類型，表示選擇的item的索引，從0開(kāi)始。默認(rèn)值是0

mode屬性值為time時(shí)需要設(shè)置的屬性

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

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

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

mode屬性值為date時(shí)需要設(shè)置的屬性

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

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

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

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

下面的布局代碼使用了3個(gè)picker組件演示了上述3種picker組件的使用方法。<view style="margin:20px"> <view style="margin-left:15px">地區(qū)選擇器view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view style="padding: 13px;"> 當(dāng)前選擇：{{array[index]}} view> picker>view><view style="margin:20px"> <view style="margin-left:15px">時(shí)間選擇器view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view style="padding: 13px;"> 當(dāng)前選擇: {{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;"> 當(dāng)前選擇: {{date}} view> picker>view>顯示效果如圖1所示。

圖1 未顯示選擇列表的picker組件顯示效果點(diǎn)擊第1個(gè)picker組件，會(huì)彈出如圖2所示的列表，可上下滑動(dòng)選擇item，然后點(diǎn)擊“確定”按鈕，會(huì)選中該item，并顯示在picker組件上。

圖2 普通picker選擇列表的效果點(diǎn)擊第2個(gè)picker組件，會(huì)彈出如圖3所示的時(shí)間選擇列表。

圖3? 時(shí)間選擇列表點(diǎn)擊第3個(gè)picker組件，會(huì)彈出如圖4所示的日期選擇列表。

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

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

關(guān)注? 極客起源? 公眾號(hào)，獲得更多免費(fèi)技術(shù)視頻和文章。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。