uniapp中使用picker-view选择时间

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.selectTime.open(this.selectTimeInfo);
        },
 // 自定义事件
getSelectTime(obj) {
   this.selectTimeInfo = obj;
},

selectTime 弹窗

<template>
    <uni-popup ref="selectTime" type="bottom" :maskClick="true">
        <view class="main">
            <view class="main-header">
                <view class="main-header-title">预约取货时间</view>
                <view class="main-header-image" @click="close">
                    <image src="@/static/image/cart/sureOrder/close.png"></image>
                </view>
            </view>
            <view class="main-time">
                <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
                    <picker-view-column>
                        <view class="item" v-for="(item, index) in days" :key="index">{{ item }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="item" v-for="(item, index) in hours" :key="index">{{ item }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}</view>
                    </picker-view-column>
                </picker-view>
            </view>
            <view class="main-button" @click="confirm">确认</view>
        </view>
    </uni-popup>
</template>

<script>
export default {
    data() {
        return {
            days: [],
            hours: [],
            minutes: [],
            day: '',
            hour: '',
            minute: '',
            visible: true,
            value: [],
            indicatorStyle: `height: 50px;`,
            selectTimeInfo: {
                name: '',
                time: ''
            }
        };
    },
    methods: {
        confirm() {
            this.day = this.days[this.value[0]];
            this.hour = this.hours[this.value[1]];
            this.minute = this.minutes[this.value[2]];
            this.selectTimeInfo.name = this.day + ' ' + this.hour + ':' + this.minute;
            let currentDate = new Date();
            currentDate.setDate(currentDate.getDate() + this.value[0]);
            let selectYear = currentDate.getFullYear();
            let selectTimeMonth = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
            let selectTimeDay = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
            let time = selectYear + '-' + selectTimeMonth + '-' + selectTimeDay + ' ' + this.hour + ':' + this.minute;
            this.selectTimeInfo.time = time.slice(0, 16)+':' + '00';
            this.$emit('getSelectTime', this.selectTimeInfo);
            this.close();
        },
        init(obj) {
            // day
            for (var i = 0; i < 5; i++) {
                let date = new Date();
                let day;
                if (i === 0) {
                    day = '今天';
                } else if (i === 1) {
                    day = '明天';
                } else {
                    date.setDate(date.getDate() + i);
                    let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                    let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                    day = month + '月' + d + '日';
                }
                this.days.push(day);
            }
            let currentDate = new Date();
            let currentMonth = currentDate.getMonth() + 1;
            let currentDay = currentDate.getDate();

            let selectTime = obj.time;
            let objTimeDate = new Date(selectTime);
            let selectMonth = objTimeDate.getMonth() + 1;
            let selectDay = objTimeDate.getDate();

            let objTimeDay;

            if (currentMonth === selectMonth && currentDay === selectDay) {
                objTimeDay = '今天';
            } else if (currentMonth === selectMonth && currentDay + 1 === selectDay) {
                objTimeDay = '明天';
            } else {
                let month = selectMonth < 10 ? '0' + selectMonth + '月' : selectMonth + '月';
                let day = selectDay < 10 ? '0' + selectDay + '日' : selectDay + '日';
                objTimeDay = month + day;
            }
            let objTimeHour = objTimeDate.getHours() < 10 ? '0' + objTimeDate.getHours() : objTimeDate.getHours();
            let objTimeMinute = objTimeDate.getMinutes() < 10 ? '0' + objTimeDate.getMinutes() + '分' : objTimeDate.getMinutes() + '分';
            this.hours = this.getHoursRange(0, 24);
            this.minutes = this.getMinuteRange(0, 61);
            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;
            }
        },
        getHoursRange(startHour, endHour) {
            const hours = [];
            for (let i = startHour; i <= endHour; i++) {
                let hour = i < 10 ? '0' + i : i;
                hours.push(hour);
            }
            return hours;
        },
        getMinuteRange(startMinute, endMinute) {
            let minutes = [];
            for (var i = startMinute; i < endMinute; i++) {
                let minute = i < 10 ? '0' + i + '分' : i + '分';
                minutes.push(minute);
            }
            return minutes;
        },
        bindChange(e) {
            const val = e.detail.value;
            this.value[0] = val[0];
            this.value[1] = val[1];
            this.value[2] = val[2];
        },
        open(obj) {
            this.$refs.selectTime.open();
            this.init(obj);
        },
        close() {
            this.$refs.selectTime.close();
        }
    }
};
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 732rpx;
    border-radius: 32rpx 32rpx 0px 0px;
    background-color: #fff;
    box-sizing: border-box;
    .main-header {
        padding: 40rpx 0 0 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .main-header-title {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 36rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .main-header-image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 40rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .main-time {
        width: 100%;
        height: 400rpx;
        margin-top: 80rpx;
        .picker-view {
            width: 100%;
            height: 300rpx;
            margin-top: 20rpx;
        }
        .item {
            line-height: 100rpx;
            text-align: center;
        }
    }
    .main-button {
        width: 496rpx;
        height: 80rpx;
        background: #c11920;
        border-radius: 80rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 80rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 40rpx auto 0 auto;
    }
}
</style>

如果需要设置不能选择之前的时间，可以拿到当前时间的时，分，来设置

 if (objTimeDay === '今天') {
        this.hours = this.getHoursRange(currentHour, 24);
        this.minutes = this.getMinuteRange(currentMinute, 61);
 } else {
        this.hours = this.getHoursRange(0, 24);
        this.minutes = this.getMinuteRange(0, 61);
 }

 getHoursRange(startHour, endHour) {
            const hours = [];
            for (let i = startHour; i <= endHour; i++) {
                let hour = i < 10 ? '0' + i : i;
                hours.push(hour);
            }
            return hours;
        },
 getMinuteRange(startMinute, endMinute) {
            let minutes = [];
            for (var i = startMinute; i < endMinute; i++) {
                let minute = i < 10 ? '0' + i + '分' : i + '分';
                minutes.push(minute);
            }
            return minutes;
        },

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/881627.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

机器学习——Stacking

机器学习——Stacking

Stacking&#xff1a; 方法&#xff1a;训练多个模型(可以是强模型)&#xff0c;然后将这些模型的预测结果作为新的特征&#xff0c;输入到下一层新的模型&#xff08;可以是多个&#xff09;中进行训练&#xff0c;从而得到最终的预测结果。 代表&#xff1a;Stacking本身并没…
阅读更多...
Java多线程Thread及其原理深度解析

Java多线程Thread及其原理深度解析

文章目录 1. 实现多线程的方式2. Thread 部分源码2.1. native 方法注册2.2. Thread 中的成员变量2.3. Thread 构造方法与初始化2.4. Thread 线程状态与操作系统状态2.4. start() 与 run() 方法2.5. sleep() 方法2.6. join() 方法2.7. interrupt() 方法 本文参考&#xff1a; 线…
阅读更多...
OpenCV_最简单的鼠标截取ROI区域

OpenCV_最简单的鼠标截取ROI区域

在OpenCV中也存在鼠标的操作&#xff0c;今天我们先介绍一下鼠标中的操作事件 void setMousecallback(const string& winname, MouseCallback onMouse, void* userdata0) setMousecallback参数说明&#xff1a; winname:窗口的名字 onMouse:鼠标响应函数&#xff0c;回调…
阅读更多...
接口加解密及数据加解密

接口加解密及数据加解密

目录 一、 加解密方式介绍 1.1 Hash算法加密 1.2. 对称加密 1.3 非对称加密 二、 我们要讲什么&#xff1f; 三、 接口加解密 四、 数据加解密 一、 加解密方式介绍 所有的加密方式我们可以分为三类&#xff1a;对称加密、非对称加密、Hash算法加密。 算法内部的具体实现…
阅读更多...
【后端开发】JavaEE初阶—线程的理解和编程实现

【后端开发】JavaEE初阶—线程的理解和编程实现

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解多线程的知识哟~~~&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;【后端开发】JavaEE初阶——计算机是如何工作的&#xff1f;&#xff1f;&#xff1f;-CSDN博客 &#x1f308;感兴趣的小伙…
阅读更多...
【设计模式】UML类图

【设计模式】UML类图

目录 前言 一、类图概述 二、类图的作用 三、类图表示法 四、类之间关系的表示方法 1. 关联关系 1.1 单向关联 1.2 双向关联 1.3 自关联 2. 聚合关系 3. 组合关系 4. 依赖关系 5. 继承关系 6. 实现关系 总结 前言 统一建模语言&#xff08; Unified Modeling La…
阅读更多...
游戏如何对抗定制挂

游戏如何对抗定制挂

近年来&#xff0c;游戏安全对抗强度相比以往更加激烈&#xff0c;具体表现在“定制挂”趋势显著。在近期收集的近万款外挂样本中&#xff0c;定制挂约占比78%&#xff0c;常见的内存修改器、变速器等通用作弊手段占比正在下降。 所谓定制挂&#xff0c;是指针对某款游戏单独开…
阅读更多...
九章云极DataCanvas公司荣获2024年服贸会“科技创新服务示范案例”

九章云极DataCanvas公司荣获2024年服贸会“科技创新服务示范案例”

9月15日&#xff0c;2024年中国国际服务贸易交易会&#xff08;服贸会&#xff09;示范案例交流会暨颁奖典礼在北京国家会议中心举行&#xff0c;九章云极DataCanvas 公司自研的DataCanvas Alaya NeW智算操作系统凭借卓越的AI创新实力、前瞻性的市场布局以及突破性的技术革新成…
阅读更多...
Python脚本每日自动备份MySQL数据库，无需mysqldump

Python脚本每日自动备份MySQL数据库，无需mysqldump

编写一个Python脚本&#xff0c;每天凌晨3点开始备份 脚本具有以下特点 不需要安装mysql-client&#xff0c;并且Windows Linux都可以使用支持多个数据库连接的备份每个数据库支持多个表备份日志保存下来&#xff0c;方便第二天早上查看备份结果 首先安装需要的库 pip3 ins…
阅读更多...
Mybatis Plus分页查询返回total为0问题

Mybatis Plus分页查询返回total为0问题

Mybatis Plus分页查询返回total为0问题 一日&#xff0c;乌云密布&#xff0c;本人看着mybatis plus的官方文档&#xff0c;随手写了个分页查询&#xff0c;如下 Page<Question> questionPage questionService.page(new Page<>(current, size),questionService.g…
阅读更多...
[C语言]连子棋游戏

[C语言]连子棋游戏

文章目录 一、前言二、游戏思路三、游戏方法1、初始化2、判断胜利3、交互4、电脑下棋 四、核心方法说明1、初始化游戏2、销毁棋盘3、显示游戏4、电脑下棋5、用户下棋6、判断游戏状态7、游戏交互 五、游戏效果展示与源码分享1、游戏效果2、源代码 一、前言 对于指针和数组理解尚…
阅读更多...
DataGrip在Windows和MacOS平台上的快捷键

DataGrip在Windows和MacOS平台上的快捷键

0. 背景信息 No.说明1测试DataGrip版本号 : 2024.2.2 1. Windows下快捷键 2. MacOS下快捷键
阅读更多...
基于波特图的控制系统设计算法

基于波特图的控制系统设计算法

波特图&#xff08;Bode Plot&#xff09;是一种用于描述线性控制系统频率响应的图形表示方法&#xff0c;通常用于分析和设计控制系统。它以控制系统的传递函数&#xff08;或频域传递函数&#xff09;为基础&#xff0c;将系统的幅频特性&#xff08;振幅-频率响应&#xff0…
阅读更多...
PyCharm与Anaconda超详细安装配置教程

PyCharm与Anaconda超详细安装配置教程

1、安装Anaconda&#xff08;过程&#xff09;-CSDN博客 2.创建虚拟环境conda create -n pytorch20 python3.9并输入conda activate pytorch20进入 3.更改镜像源conda/pip(只添加三个pip源和conda源即可) 4.安装PyTorch&#xff08;CPU版&#xff09; 5.安装Pycharm并破解&…
阅读更多...
LED灯、蜂鸣器、继电器的控制

LED灯、蜂鸣器、继电器的控制

LED灯的控制 该专栏所有文章都默认使用STM32F103ZET6开发板 目录 LED灯的控制 一、简单的LED灯控制 1、初始化函数 led灯 2、应用函数 2、蜂鸣器 3、继电器 一、简单的LED灯控制 编程框架&#xff1a;初始化函数和应用函数 1、初始化函数 初始化函数一般包括&#xf…
阅读更多...
SVTR文字识别

SVTR文字识别

论文地址&#xff1a;https://arxiv.org/abs/2205.00159 notes&#xff1a; 论文2.5中说的N nodes&#xff0c;就是输出的类别数量&#xff0c;英文37&#xff0c;中文6625&#xff0c;英文37说的是最简单的英文文字识别任务&#xff0c;不区分大小写&#xff0c;就是26个字母…
阅读更多...
软件测试 BUG 篇

软件测试 BUG 篇

目录 一、软件测试的生命周期 二、BUG 1. bug的概念 2. 描述bug的要素 3. bug的级别 4. bug的生命周期 5. 与开发产生争执怎么办&#xff1f;&#xff08;面试高频考题&#xff09; 5.1 先检查自身&#xff0c;是否bug描述不清楚 5.2 站在用户角度考虑并抛出问题 5.3 …
阅读更多...
nginx架构篇（三）

nginx架构篇（三）

文章目录 一、Nginx实现服务器端集群搭建1.1 Nginx与Tomcat部署1. 环境准备(Tomcat)2. 环境准备(Nginx) 1.2. Nginx实现动静分离1.2.1. 需求分析1.2.2. 动静实现步骤 1.3. Nginx实现Tomcat集群搭建1.4. Nginx高可用解决方案1.4.1. Keepalived1.4.2. VRRP介绍1.4.3. 环境搭建环境…
阅读更多...
【已解决】SpringBoot3项目整合Druid依赖：Druid监控页面404报错

【已解决】SpringBoot3项目整合Druid依赖：Druid监控页面404报错

文章标题 问题描述原因分析解决方案参考资料 问题描述 最近&#xff0c;笔者在SpringBoot3项目中整合Druid连接池时&#xff0c;偶然翻到一条介绍Druid监控的短视频&#xff0c;兴致盎然之下尝试设置了一下Druid监控。 But&#xff0c;按照视频中提供的yml参数对照设置&#x…
阅读更多...
【全网最全】2024华为杯数学建模C题高质量成品查看论文！【附带全套代码+数据】

【全网最全】2024华为杯数学建模C题高质量成品查看论文！【附带全套代码+数据】

题 目&#xff1a; ___基于数据驱动下磁性元件的磁芯损耗建模 完整版获取&#xff1a; 点击链接加入群聊【2024华为杯数学建模助攻资料】&#xff1a;http://qm.qq.com/cgi-bin/qm/qr?_wv1027&kxtS4vwn3gcv8oCYYyrqd0BvFc7tNfhV7&authKeyedQFZne%2BzvEfLEVg2v8FOm%…
阅读更多...
最新文章

Copyright @ 2022~2023