微信小程序picker組件樣式及開發(fā)實例

1. <view>普通選擇器</view>
2.  
3. <!--mode默認selector range數(shù)據(jù)源value選擇的index bindchange事件監(jiān)聽-->
4.  
5. <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
6.  
7. <text>{{array[index]}}</text>
8.  
9. </picker>
10.  
11. <view>時間選擇器</view>
12.  
13. <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
14.  
15. <text>{{time}}</text>
16.  
17. </picker>
18.  
19.  
20.  
21. <view>日期選擇器</view>
22.  
23. <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
24.  
25. <text>{{date}}</text>
26.  
27. </picker>

1. Page({
2.  
3. data:{
4.  
5. // text:"這是一個頁面"
6.  
7. array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
8.  
9. index: 0,
10.  
11. time: '08:30',
12.  
13. date: '2016-09-26'
14.  
15. },
16.  
17.  
18.  
19. /**
20.  
21. * 監(jiān)聽普通picker選擇器
22.  
23. */
24.  
25. listenerPickerSelected: function(e) {
26.  
27. //改變index值，通過setData()方法重繪界面
28.  
29. this.setData({
30.  
31. index: e.detail.value
32.  
33. });
34.  
35. },
36.  
37.  
38.  
39. /**
40.  
41. * 監(jiān)聽時間picker選擇器
42.  
43. */
44.  
45. listenerTimePickerSelected: function(e) {
46.  
47. //調(diào)用setData()重新繪制
48.  
49. this.setData({
50.  
51. time: e.detail.value,
52.  
53. });
54.  
55. },
56.  
57.  
58.  
59. /**
60.  
61. * 監(jiān)聽日期picker選擇器
62.  
63. */
64.  
65. listenerDatePickerSelected:function(e) {
66.  
67. this.setDate({
68.  
69. date: e.detail.value
70.  
71. })
72.  
73. },
74.  
75.  
76.  
77. onLoad:function(options){
78.  
79. // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
80.  
81. },
82.  
83. onReady:function(){
84.  
85. // 頁面渲染完成
86.  
87. },
88.  
89. onShow:function(){
90.  
91. // 頁面顯示
92.  
93. },
94.  
95. onHide:function(){
96.  
97. // 頁面隱藏
98.  
99. },
100.  
101. onUnload:function(){
102.  
103. // 頁面關(guān)閉
104.  
105. }
106.  
107. })