微信小程序picker选择器怎么实现

本篇内容主要讲解"微信小程序picker选择器怎么实现"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"微信小程序picker选择器怎么实现"吧!

picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。

小程序picker选择器的实现方式

wxml

普通选择器   {{array[index]}}  时间选择器  {{time}}    日期选择器  {{date}} 

js

1. Page({

2. data:{

3. // text:"这是一个页面"

4. array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],

5. index: 0,

6. time: '08:30',

7. date: '2016-09-26'

8. },

9. /**

10. * 监听普通picker选择器

11. */

12. listenerPickerSelected: function(e) {

13. //改变index值，通过setData()方法重绘界面

14. this.setData({

15. index: e.detail.value

16. });

17. },

18. /**

19. * 监听时间picker选择器

20. */

21. listenerTimePickerSelected: function(e) {

22. //调用setData()重新绘制

23. this.setData({

24. time: e.detail.value,

25. });

26. },

27. /**

28. * 监听日期picker选择器

29. */

30. listenerDatePickerSelected:function(e) {

31. this.setDate({

32. date: e.detail.value

33. })

34. },

35. onLoad:function(options){

36. // 页面初始化 options为页面跳转所带来的参数

37. },

38. onReady:function(){

39. // 页面渲染完成

40. },

41. onShow:function(){

42. // 页面显示

43. },

44. onHide:function(){

45. // 页面隐藏

46. },

47. onUnload:function(){

48. // 页面关闭

49. }

50. })

到此，相信大家对"微信小程序picker选择器怎么实现"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！