微信小程序picker组件样式及开发实例

1. <view>普通选择器</view>
2.  
3. <!--mode默认selector range数据源value选择的index bindchange事件监听-->
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. * 监听普通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. * 监听时间picker选择器
42.  
43. */
44.  
45. listenerTimePickerSelected: function(e) {
46.  
47. //调用setData()重新绘制
48.  
49. this.setData({
50.  
51. time: e.detail.value,
52.  
53. });
54.  
55. },
56.  
57.  
58.  
59. /**
60.  
61. * 监听日期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为页面跳转所带来的参数
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. // 页面关闭
104.  
105. }
106.  
107. })