微信小程序開發極速實戰：picker滾動選擇器

微信小程序開發組件：

組件說明：

picker：

滾動選擇器，現支持三種選擇器，經過mode屬性來區分，分別是普通選擇器(mode = selector)，時間選擇器(mode = time)，日期選擇器(mode = date)，默認是普通選擇器。               

wxml

 

<view class="page">

  <view class="page__hd">

    <text class="page__title">picker</text>

    <text class="page__desc">選擇器</text>

  </view>

  <view class="page__bd">

    <view class="section">

      <view class="section__title">地區選擇器</view>

      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

        <view class="picker">

          當前選擇：{{array[index]}}

        </view>

      </picker>

    </view>

    <view class="section">

      <view class="section__title">時間選擇器</view>

      <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">

        <view class="picker">

          當前選擇: {{time}}

        </view>

      </picker>

    </view>

    <view class="section">

      <view class="section__title">日期選擇器</view>

      <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">

        <view class="picker">

          當前選擇: {{date}}

        </view>

      </picker>

    </view>

  </view>

</view>

 

js

 

Page({

  data: {

    array: ['中國', '美國', '巴西', '日本'],

    index: 0,

    date: '2016-09-01',

    time: '12:01'

  },

  bindPickerChange: function(e) {

    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)

    this.setData({

      index: e.detail.value

    })

  },

  bindDateChange: function(e) {

    this.setData({

      date: e.detail.value

    })

  },

  bindTimeChange: function(e) {

    this.setData({

      time: e.detail.value

    })

  }

})

 

wxss

 

.page {

    min-height: 100%;

    flex: 1;

    background-color: #FBF9FE;

    font-size: 32rpx;

    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

    overflow: hidden;

}

.page__hd{

    padding: 50rpx 50rpx 100rpx 50rpx;

    text-align: center;

}

.page__title{

    display: inline-block;

    padding: 20rpx 40rpx;

    font-size: 32rpx;

    color: #AAAAAA;

    border-bottom: 1px solid #CCCCCC;

}

.page__desc{

    display: none;

    margin-top: 20rpx;

    font-size: 26rpx;

    color: #BBBBBB;

}

.picker{

  padding: 26rpx;

  background-color: #FFFFFF;

}

.section{

    margin-bottom: 80rpx;

}

.section__title{

    margin-bottom: 16rpx;

    padding-left: 30rpx;

    padding-right: 30rpx;

}

 

主要屬性：

普通選擇器：(mode = selector)

 

屬性名

類型

默認值

說明

range

Array

[ ]

mode爲 selector 時，range 有效

value

Number

0

mode爲 selector 時，是數字，表示選擇了 range 中的第幾個，從0開始。

bindchange

EventHandle

向右添加列

value改變時觸發change事件，event.detail = {value: value}

 

時間選擇器：(mode = time)

 

屬性名

類型

默認值

說明

value

String

 

表示選中的時間，格式爲」hh:mm」

start

String

 

表示有效時間範圍的開始，字符串格式爲」hh:mm」

end

String

 

表示有效時間範圍的結束，字符串格式爲」hh:mm」

bindchange

EventHandle

 

value改變時觸發change事件，event.detail = {value: value}

 

日期選擇器：(mode = date)

 

屬性名

類型

默認值

說明

value

String

0

表示選中的日期，格式爲」YYYY-MM-DD」

start

String

 

表示有效日期範圍的開始，字符串格式爲」YYYY-MM-DD」

end

String

 

表示有效日期範圍的結束，字符串格式爲」YYYY-MM-DD」

fields

String

day

有效值year,month,day，表示選擇器的粒度

bindchange

EventHandle

 

value改變時觸發change事件，event.detail = {value: value}