小程序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组件有所帮助。