Menu
小程序资讯
小程序资讯
微信小程序把玩《六》:picker组件,radio组件,slider组件
时间:2016-10-21 15:03:00
一:picker组件

picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!!

主要属性:

普通选择器

时间选择器

日期选择器

wxml

  1. <view>普通选择器</view>
  2. <!--mode默认selector range数据源value选择的index bindchange事件监听-->
  3. <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
  4. <text>{{array[index]}}</text>
  5. </picker>
  6. <view>时间选择器</view>
  7. <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
  8. <text>{{time}}</text>
  9. </picker>
  10. <view>日期选择器</view>
  11. <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
  12. <text>{{date}}</text>
  13. </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. })