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

发布时间:2022-03-11 10:20:20 作者:iii
阅读:275
开发者专用服务器限时活动,0元免费领! 查看>>

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

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

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


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

wxml

<view>普通选择器</view> <!--mode默认selector range数据源value选择的index bindchange事件监听--> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected"> <text>{{array[index]}}</text> </picker> <view>时间选择器</view> <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected"> <text>{{time}}</text> </picker>   <view>日期选择器</view> <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected"> <text>{{date}}</text> </picker>

 

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选择器怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:
  1. 微信小程序实现的picker多级联动功能示例
  2. 怎么在微信小程序中使用picker实现级联菜单

开发者交流群:

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序 picker

上一篇:php如何将字符转为实体

下一篇:html如何使用<ul><li>无序列表标签

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
开发者交流群×