嵌入式选择器组件

picker-view 是 Uniapp 中的嵌入页面的滚动选择器，提供了相较于 picker 更为灵活的选择方式。picker-view 支持自定义的 UI 和弹出方式，因此适用于需要更复杂选择器交互的场景。picker-view 常用于时间、日期等需要联动选择的场景，同时可以与 picker-view-column 组件一起使用，完成多列选择功能。

1. 什么是 picker-view 组件？

picker-view 是嵌入页面的滚动选择器，相比于弹出式的 picker 组件，它能更好地控制 UI 展现和自定义交互。它常用于需要多列或多项联动选择的场景，例如日期选择、时间选择等。picker-view 组件通过组合 picker-view-column 组件，实现类似原生选择器的功能。

使用场景

• 日期选择：例如选择年、月、日，日期选择器通过 picker-view-column 分别提供三列数据，并且联动更新。
• 时间选择：小时、分钟等时间选择也可通过 picker-view 实现。
• 自定义选择器：当需要滚动选择多个不同维度的数据时，可以使用 picker-view 来自定义选项内容。

2. picker-view 组件的常用属性

picker-view 组件提供了多种属性，允许开发者定制选择器的展示样式和行为。下面是 picker-view 常用属性的详细说明和示例代码：

属性名	类型	默认值	说明
value	Array＜Number＞	每列所选项的下标，数组中的数字依次表示 picker-view-column 选择的第几项（下标从 0 开始）。	数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选中框的样式	通过 CSS 样式字符串自定义选中框样式。
indicator-class	String	设置选中框的类名，适配自定义样式	支持通过类名自定义选中框样式，使用 scoped 时需要 /deep/。
mask-style	String	设置蒙层的样式	设置覆盖 picker-view 组件的遮罩层样式。
mask-class	String	设置蒙层的类名	设置覆盖 picker-view 组件的遮罩层的类名。
immediate-change	Boolean	false	是否在手指松开时立即触发 change 事件，若不开启则会在滚动动画结束后触发 change 事件。
@change	EventHandle	滚动选择，value 改变时触发 change 事件，event.detail.value 为数组，表示选择的各列的当前值。	用于处理选择变动的事件。
@pickstart	EventHandle	滚动选择开始时触发	滚动选择的开始事件。
@pickend	EventHandle	滚动选择结束时触发	滚动选择的结束事件。

2.1 滚动选择和显示样式

• 说明：设置滚动选择器的初始值，并通过 value 属性控制每列选择的初始下标。
• 类型：Array＜Number＞

<template>
  <view>
    <!-- 选择器展示，初始选中年份、月份、日期 -->
    <picker-view :value="value" @change="bindChange" class="picker-view">
      <!-- 年份选择列 -->
      <picker-view-column>
        <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
      </picker-view-column>
      <!-- 月份选择列 -->
      <picker-view-column>
        <view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
      </picker-view-column>
      <!-- 日期选择列 -->
      <picker-view-column>
        <view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script setup>
// 初始化数据
const years = Array.from({ length: 31 }, (_, i) => 1990 + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const days = Array.from({ length: 31 }, (_, i) => i + 1);

// 初始选中项（1999年, 5月, 20日）
const value = [9, 4, 19];

// 选择变更处理函数
const bindChange = (e) => {
  const val = e.detail.value;
  console.log("当前选择的年份、月份和日期分别是：", years[val[0]], months[val[1]], days[val[2]]);
};
</script>

<style scoped>
.picker-view {
  width: 750rpx;
  height: 600rpx;
}

.item {
  line-height: 100rpx;
  text-align: center;
}
</style>

2.2 中间选中框样式 indicator-style

• 说明：设置 picker-view 中间选中框的样式。
• 类型：String

<template>
  <view>
    <!-- 带有自定义样式的 picker-view -->
    <picker-view :value="value" :indicator-style="'height: 50px; background-color: lightblue;'" class="picker-view">
      <picker-view-column>
        <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

3. 日期选择器使用

以下案例展示了 picker-view 的日期选择应用，涵盖了选择年份、月份、日期，并实时更新选择结果。

<template>
  <view>
    <!-- 展示选择的日期 -->
    <view class="uni-padding-wrap">
      <view class="uni-title">日期：{{ year }}年{{ month }}月{{ day }}日</view>
    </view>

    <!-- 日期选择器 -->
    <picker-view :value="value" @change="bindChange" class="picker-view" :indicator-style="'height: 50px;'">
      <picker-view-column>
        <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 初始化年份、月份、日期数据
const date = new Date();
const years = Array.from({ length: 31 }, (_, i) => 1990 + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const days = Array.from({ length: 31 }, (_, i) => i + 1);

// 初始化当前选中日期
const value = ref([30, date.getMonth(), date.getDate() - 1]);
const year = ref(years[value.value[0]]);
const month = ref(months[value.value[1]]);
const day = ref(days[value.value[2]]);

// 选择变更处理函数
const bindChange = (e) => {
  const val = e.detail.value;
  year.value = years[val[0]];
  month.value = months[val[1]];
  day.value = days[val[2]];
};
</script>

<style scoped>
.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  line-height: 100rpx;
  text-align: center;
}
</style>