uni-app 内置组件：PickerView

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

picker-view 是嵌入页面的滚动选择器。

API

以下是 picker-view 组件的 API 介绍：

属性列表

value：数组，表示选择了 picker-view 中的哪一项（下标），每一列的选择项下标数组。
indicator-style：设置选择器中间选中框的样式。
indicator-class：设置选择器中间选中框的类名。
mask-style：设置蒙层的样式。
mask-class：设置蒙层的类名。

事件列表

change：当滚动选择时，触发 change 事件，event.detail = {value: value}，其中 value 为数组，表示选择了数组中的哪个项（下标）。

示例

以下是 picker-view 组件在页面中的使用示例：

html 复制代码

<view class="picker-view">
  <picker-view indicator-style="height: 50px;" class="picker-view" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view v-for="(item, index) in years" :key="index">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in months" :key="index">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in days" :key="index">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>

JavaScript 部分：

javascript 复制代码

export default {
  data() {
    return {
      years: ['2019', '2020', '2021', '2022'],
      months: ['01', '02', '03', '04'],
      days: ['01', '02', '03', '04', '05'],
      value: [0, 1, 2], // 默认选中的每一列的数组下标
    };
  },
  methods: {
    bindChange: function(e) {
      const val = e.detail.value
      this.value = val
    }
  }
}

在这个示例中，picker-view 创建了一个日期选择器，包含年、月、日三列数据，用户可以通过滚动每列来选择一个日期。当用户选中某一列的值时，会触发 bindChange 方法，更新 value 数组中对应列的下标。

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