013 - 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器

用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器.

上gif:

上代码:

1.index.js

[javascript] view plain copy

print ?

1. //index.js  
2. //获取应用实例  
3. var app = getApp()  
4. Page({  
5.   data: {  
6.     date: '2016-11-08',  
7.     time: '12:00',  
8.     array: ['中国', '巴西', '日本', '美国'],  
9.     index: 0,  
10.   },  
11.   
12.   onLoad: function () {  
13.   
14.   },  
15.   //  点击时间组件确定事件  
16.   bindTimeChange: function (e) {  
17.     this.setData({  
18.       time: e.detail.value  
19.     })  
20.   },  
21.   //  点击日期组件确定事件  
22.   bindDateChange: function (e) {  
23.     this.setData({  
24.       date: e.detail.value  
25.     })  
26.   },  
27.   //  点击国家组件确定事件  
28.   bindPickerChange: function (e) {  
29.     this.setData({  
30.       index: e.detail.value  
31.     })  
32.   }  
33. })  

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    date: '2016-11-08',
    time: '12:00',
    array: ['中国', '巴西', '日本', '美国'],
    index: 0,
  },

  onLoad: function () {

  },
  //  点击时间组件确定事件
  bindTimeChange: function (e) {
    this.setData({
      time: e.detail.value
    })
  },
  //  点击日期组件确定事件
  bindDateChange: function (e) {
    this.setData({
      date: e.detail.value
    })
  },
  //  点击国家组件确定事件
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  }
})

2.index.wxml

[html] view plain copy

print ?

1. <!--index.wxml-->  
2. <view class="section" style="background:#787878;margin:20rpx;padding:20rpx">  
3.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
4.     <view class="picker">  
5.       国家：{{array[index]}}  
6.     </view>  
7.   </picker>  
8. </view>  
9.   
10. <view class="section" style="background:#787878;margin:20rpx;padding:20rpx">  
11.   <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">  
12.     <view class="picker">  
13.      时间 : {{time}}  
14.     </view>  
15.   </picker>  
16. </view>  
17. <view class="section" style="background:#787878;margin:20rpx;padding:20rpx">  
18.   <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">  
19.     <view class="picker">  
20.       日期: {{date}}  
21.     </view>  
22.   </picker>  
23. </view>  

<!--index.wxml-->
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      国家：{{array[index]}}
    </view>
  </picker>
</view>

<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
     时间 : {{time}}
    </view>
  </picker>
</view>
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      日期: {{date}}
    </view>
  </picker>
</view>

①普通选择器

选择器用mode来区别,默认是普通选择器,e.detail.value拿到的值是选择了项的索引index,再通过array拿到值.在data里面做初始化的时候,将备选项加入array即可.

选择时触发bindPickerChange事件,获取index.

②时间选择器

mode = time时,是时间选择器.start,end分别是有效时间范围的开始和结束.格式hh:mm

选择时触发bindTimeChange事件,获取time.

③日期选择器

mode = date时,是时间选择器.start,end分别是有效日期范围的开始和结束.格式yyyy-MM-dd

选择时触发bindDateChange事件,获取date

我的博客:http://blog.csdn.NET/qq_31383345