小程序picker組件詳解

一、picker組件介紹

小程序中的picker組件是一種用戶界面組件，它可以讓用戶在一個滾動列表中選擇一個或多個選項。picker組件提供了多種選擇器類型和設置項，以支持靈活的選擇器呈現，為用戶提供更好的體驗。

picker組件是由微信團隊提供的，開發者可以在小程序中直接使用該組件，無需做太多複雜的開發工作。picker組件分為單列選擇器和多列選擇器兩種類型，可以適用於不同場景的應用。

二、picker組件類型

picker組件有兩種類型：單列選擇器和多列選擇器。

1. 單列選擇器

單列選擇器使用一個滾輪列表，用戶可以在滾輪列表中選擇一個選項。單列選擇器用於選擇單個選項，例如選擇省份、城市或日期等。

picker組件的基本使用：
<picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">{{array[index]}}</view>
</picker>

js文件的基本處理：
Page({
  data: {
    index: 0,
    array: ['美國', '中國', '巴西', '日本']
  },
  bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

2. 多列選擇器

多列選擇器使用多個滾輪列表，用戶可以在每個滾輪列表中選擇一個選項。多列選擇器用於選擇具有關聯性的多個選項，例如選擇省份和城市、年份和月份等。

picker組件的基本使用：
<picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{[0, 0]}}" range="{{multiArray}}">
  <view class="picker">{{multiArray[0][value[0]]}}</view>
  <view class="picker">{{multiArray[1][value[1]]}}</view>
</picker>

js文件的基本處理：
Page({
  data: {
    multiArray: [['北京市', '上海市', '廣州市', '深圳市'], ['東城區', '西城區', '崇文區', '宣武區']],
    multiIndex: [0, 0]
  },
  bindMultiPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  }
})

三、picker組件設置項

picker組件提供了多個設置項，以支持更靈活的選擇器樣式和功能。

1. 設置選項值範圍

通過設置range屬性，可以指定picker組件的選項值範圍。

picker組件設置選項值範圍：
<picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">{{array[index]}}</view>
</picker>

2. 設置默認選項值

通過設置value屬性，可以指定picker組件的默認選項值。

picker組件設置默認選項值：
<picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">{{array[index]}}</view>
</picker>

3. 設置選項改變事件

通過設置bindchange屬性，可以在選項改變時觸發一個事件處理函數。

picker組件設置選項改變事件：
<picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">{{array[index]}}</view>
</picker>

js文件的基本處理：
Page({
  data: {
    index: 0,
    array: ['美國', '中國', '巴西', '日本']
  },
  bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

4. 設置滾輪顯示數量

通過設置picker-group組件的height屬性，可以指定picker組件的滾輪顯示數量。

picker-group組件設置滾輪顯示數量：
<picker-group height="160rpx">
  <picker mode="selector" range="{{['100元', '200元', '300元', '400元', '500元']}}" bindchange="bindPickerChange">
    <view class="picker">{{value}}</view>
  </picker>
  <picker mode="selector" range="{{['男', '女']}}" bindchange="bindPickerChange2">
    <view class="picker">{{value}}</view>
  </picker>
</picker-group>

5. 設置滾輪固定位置

通過設置picker組件的animation屬性，可以將picker的滾輪固定到某一位置。

picker組件設置滾輪固定位置：
<picker mode="selector" range="{{['100元', '200元', '300元', '400元', '500元']}}" animation="{{animation}}" bindchange="bindPickerChange">
  <view class="picker">{{value}}</view>
</picker>

js文件的基本處理：
Page({
  data: {
    animation: {}
  },
  bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)

    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })

    animation.translateY(-100).step()

    this.setData({
      value: e.detail.value,
      animation: animation.export()
    })
  }
})

四、picker組件應用

picker組件可以應用於不同領域，例如產品訂單、配送地址、預約時間、活動報名等場景。

以預約時間選擇器為例，實現類似日期時間選擇器的功能。

<view class="page__bd page__bd_spacing">
  <view class="weui-cells__title">預約時間
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="weui-cells__label">
      {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    </view>
  </picker>
</view>

js文件的基本處理：
Page({
  data: {
    multiArray: [[], []],
    multiIndex: [0, 0]
  },
  onLoad: function () {
    var date = new Date();
    var years = []
    var months = []
    var days = []
    var hours = []
    var minutes = []
    for (var i = date.getFullYear(); i <= date.getFullYear() + 1; i++) {
      years.push(i)
    }
    for (var i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (var i = 1; i <= 31; i++) {
      days.push(i)
    }
    for (var i = 0; i <= 23; i++) {
      hours.push(i)
    }
    for (var i = 0; i <= 59; i++) {
      minutes.push(i)
    }
    this.setData({
      'multiArray[0]': years,
      'multiArray[1]': [months, days, hours, minutes]
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為：', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  }
})

五、總結

本文介紹了小程序中的picker組件，包括picker組件的基本介紹、類型、設置項以及應用，希望對開發者在小程序開發中使用picker組件有所幫助。