原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2018/1216/237.html
微信小程序把玩《六》：picker组件，radio组件，slider组件
一：picker组件
picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是我们常州手游开发-幻天网络有BUG还是啥！没法手机测试现在也不知道咋回事！！
主要属性：
普通选择器
时间选择器
日期选择器
wxml
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>
js
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. })
二：radio组件
上篇：上一篇：微信小程序开发《五》：checkbox组件
下篇：下一篇：常州微信小程序开发《七》：switch组件
