uniapp中使用picker-view选择时间

原创

已于 2024-09-15 09:23:31 修改 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2024-09-15 08:44:20 首次发布

picker-view 是 UniApp 中用于展示和选择数据的组件。它适用于创建多列选择器，类似于 iOS 和 Android 系统中的选择器视图。以下是 picker-view 的详细介绍，包括用法、属性和事件。
在这里插入图片描述

一用法

<template>
  <view>
    <picker-view :value="value" @change="onChange" :indicator-style="indicatorStyle">
      <picker-view-column v-for="(column, index) in columns" :key="index">
        <view v-for="(item, itemIndex) in column" :key="itemIndex">{
  
  { item }}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      value: [0, 0], // 选中的值对应列中的索引
      columns: [     // 列数据
        ['Option 1', 'Option 2', 'Option 3'],
        ['Item 1', 'Item 2', 'Item 3']
      ],
      indicatorStyle: 'height: 50px; line-height: 50px;' // 指示器样式
    };
  },
  methods: {
   
   
    onChange(e) {
   
   
      this.value = e.detail.value; // 更新选中的值
      console.log('Selected value:', this.value);
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加自定义样式 */
</style>

二主要属性

value: 数组，表示当前选中的索引值。数组的长度应与 columns 的列数一致。例如，如果有两列，每列的选项数组长度分别为 3 和
3，则 value 应该是 [0, 0] 表示两列的默认选中项索引。
indicator-style: 字符串，用于设置选择器的指示器样式。可以设置如高度、背景颜色等样式。

三主要事件

change: 当用户选择了新项时触发。事件对象的 detail.value 是更新后的选中值数组。例如：

onChange(e) {
   
   
  this.value = e.detail.value;
  console.log('Selected value:', this.value);
}

picker-view-column 是 picker-view 的子组件，每个 picker-view-column 代表一个列。
v-for 指令用于遍历 columns 和列中的选项数据。
e.detail.value 是一个数组，表示用户选择的每一列的索引。

四应用场景

选择日期和时间
选择地区（省市区）
多级分类选择

五案例

需求：购买商品时，可以选择取货时间，点击向右的箭头可以显示选择预约取货时间弹窗。第一次进入弹窗，默认回显当前时间，选择时间后，回显选择的时间
父组件在打开弹框时，会传一个当前时间给子组件，子组件在初始化时，根据当前时间进行回显。
在这里插入图片描述

根据传过来的时间，拿到月，时，分，然后分别在days,hours,minutes中找到对应的index,在分别把index push到value中
在这里插入图片描述

  let dayIndex = this.days.findIndex((item) => item === objTimeDay);
            let hourIndex = this.hours.findIndex((item) => item === objTimeHour);
            let minuteIndex = this.minutes.findIndex((item) => item === objTimeMinute);
            if (dayIndex > -1) {
   
   
                this.value[0] = dayIndex;
            }
            if (hourIndex > -1) {
   
   
                this.value[1] = hourIndex;
            }
            if (minuteIndex > -1) {
   
   
                this.value[2] = minuteIndex;
            }

在这里插入图片描述

完整代码
父组件

// 引用
import selectTime from './selectTime/index.vue';
//注册
 components: {
   
    selectAddress, selectShop, selectTime },
//使用
 <select-time ref="selectTime" @getSelectTime="getSelectTime"></select-time>

openSelectTimePopup() {
   
   
            this.$refs.