小程序学习（十四）

picker组件的简单学习

在小程序中，picker组件算是比较常见的，这种滚动选择器的呈现方式有两种：
一是从底部弹起的；
二是嵌入页面的；
先来学习一下从底部弹起的滚动选择器的基本用法，首先看一下它的相关属性。

我们可以看到，mode可以有很多取值，今天的学习是普通选择器、时间选择器、日期选择器。属性如下：



了解了相关属性后，开始编辑代码：
.wxml

<view class="select">
 <view class="title">时间选择器</view>
 <picker mode="time" value="{{time}}" start="06:00" end="23:59" bindchange="bindTimeChange">
 <view class="picker">
  当前选择: {{time}}
 </view>
 </picker>
</view>
<view class="select">
 <view class="title">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2019-09-01" end="2025-09-01" bindchange="bindDateChange">
 <view class="picker">当前选择: {{date}}
 </view>
 </picker>
</view>
<view class="select">
 <view class="title">普通选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">当前选择：{{array[index]}}
 </view>
 </picker>
</view>

.wxss

.picker{
  background-color: #F8F8F8;
 padding: 15px;
 font-size:40rpx;
}
.section {
 display: flex;
 flex-direction: column;
 padding: 20rpx 0rpx;
 color: #333;
}
.title{
 font-size: 40rpx;
 margin: 10rpx 0rpx;
}

.js

Page({
  data: {
    array: ['北京', '贵州', '重庆'],
    index: 0,
    date: '2019-09-01',
    time: '12:01'
  },
  bindDateChange: function (e) {
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
    this.setData({
      time: e.detail.value
    })
  },
  bindPickerChange: function (e) {
    console.log('', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

基本效果就是这样。