1. <view>普通選擇器</view>
3. <!--mode默認selector range數據源value選擇的index bindchange事件監聽-->
5. <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
7. <text>{{array[index]}}</text>
9. </picker>
11. <view>時間選擇器</view>
13. <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
15. <text>{{time}}</text>
17. </picker>
21. <view>日期選擇器</view>
23. <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
25. <text>{{date}}</text>
27. </picker>

1. Page({
3. data:{
5. // text:"這是一個(ge) 頁麵"
7. array: ['androids', 'ioses', 'ReactNativ', 'WeChat', 'Web'],
9. index: 0,
11. time: '08:30',
13. date: '2016-09-26'
15. },
19. /**
21. * 監聽普通picker選擇器
23. */
25. listenerPickerSelected: function(e) {
27. //改變index值，通過setData()方法重繪界麵
29. this.setData({
31. index: e.detail.value
33. });
35. },
39. /**
41. * 監聽時間picker選擇器
43. */
45. listenerTimePickerSelected: function(e) {
47. //調用setData()重新繪製
49. this.setData({
51. time: e.detail.value,
53. });
55. },
59. /**
61. * 監聽日期picker選擇器
63. */
65. listenerDatePickerSelected:function(e) {
67. this.setDate({
69. date: e.detail.value
71. })
73. },
77. onLoad:function(options){
79. // 頁麵初始化 options為(wei) 頁麵跳轉所帶來的參數
81. },
83. onReady:function(){
85. // 頁麵渲染完成
87. },
89. onShow:function(){
91. // 頁麵顯示
93. },
95. onHide:function(){
97. // 頁麵隱藏
99. },
101. onUnload:function(){
103. // 頁麵關(guan) 閉
105. }
107. })

二：radio組件

微信小程序入門係列《四》：觸控事件

微信小程序實戰教程：火車票查詢，直取12306數據