uni-app 内置组件：Picker

有问题请咨询gpt2023-11-15 7:05

Picker 组件是一个通用的滚动选择器，用户可以在其中选择值，通常用于日期、时间或者任意预设的一组值。

API

Picker 组件的属性较多，这里介绍一些常用的：

属性列表

mode：选择器类型，有效值为selector, multiSelector, time, date, region。
value：值的序号，当 mode 为 selector 或 multiSelector 时，为数组的下标；当 mode 为 date 或 time 时，为相应的字符串。
range：当 mode 为 selector 时，range 为数组，用户需要从数组中选择数据；当 mode 为 multiSelector 时，range 为二维数组，每列数据对应的数组。
range-key：当 range 是一个 Object Array 时，通过 range-key 可以指定 Object 中 key 的值作为选择器显示内容。
start 和 end：当 mode 为 date 时，可以设定可选择的日期范围。
fields：当 mode 为 date 时，可选择年、月、日，有效值为year, month, day。

事件列表

change：值改变时触发的事件，event.detail = {value: value}。
cancel：取消选择时触发的事件。
columnchange：当 mode 为 multiSelector 时，滚动某一列的值改变时触发的事件。

示例

HTML 部分：

html 复制代码

<picker mode="selector" value="{{index}}" range="{{array}}" bindchange="bindPickerChange">
  <view class="picker">
    当前选择：{{array[index]}}
  </view>
</picker>

JavaScript 部分：

javascript 复制代码

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    index: 0
  },
  bindPickerChange: function(e) {
    this.setData({
      index: e.detail.value
    })
  }
})

在这个例子中，用户可以通过滚动选择器选择 '美国', '中国', '巴西', '日本' 这四个选项之一。用户选择不同的选项，页面上会显示 当前选择： 后面跟随用户的选择。

更详细的内容请参考最新的 uni-app 官方文档。