uniapp中使用picker-view选择时间

server/2024/9/20 3:44:21/ 标签: uni-app, 前端

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) {// dayfor (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;},

http://www.ppmy.cn/server/119256.html

相关文章

撤回仓库的提交

结论先行 未推送提交&#xff1a;可以使用 git reset --soft HEAD~1 或 git reset --hard HEAD~1 来撤回提交&#xff0c;选择保留或丢弃修改。已推送提交&#xff1a;可以使用 git reset --soft HEAD~1 后&#xff0c;通过 git push --force 强制覆盖远程的提交记录。 问题描…

使用Docker挂载部署JAVA项目

用于需要使用Docker容器部署项目&#xff0c;但可能部署包需多次调整的场景&#xff0c;这种部署方式可以减少镜像制作的过程&#xff1b; 推荐几个使用Docker安装环境的文章&#xff1a; 1.Nocas: https://blog.csdn.net/weixin_44700323/article/details/140995859 2.Mysql: …

集合是什么

1.是什么 集合&#xff08;Collection&#xff09;是Java语言中一个非常重要的概念&#xff0c;它是一组对象的容器&#xff0c;用于存储、检索和操作对象。在Java中&#xff0c;集合框架定义了一系列接口和实现类&#xff0c;用于处理不同类型的集合。 集合的概念 集合框架提…

SpringBoot基础实战系列(二)springboot解析json与HttpMessageConverter

SpringBoot解析Json格式数据 ResponseBody 注&#xff1a;该注解表示前端请求后端controller&#xff0c;后端响应请求返回 json 格式数据前端&#xff0c;实质就是将java对象序列化 1.创建Controller 注&#xff1a;springboot默认就已经支持返回json格式数据&#xff0c;只需…

PCL 计算点云距离

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 顾名思义,这个就是计算点云中每个点到另一个点云最近的距离,之后我们可以基于这些距离做一些预处理工作。思路其实很简单,通过对点云构建kdtree并采用并行的方式实现该计算过程。 二、实现代码 ColorRamp.h #ifn…

果蔬识别系统性能优化之路(四)

目录 前情提要剩下问题 问题排查解决方案下一步 前情提要 果蔬识别系统性能优化之路&#xff08;三&#xff09; 剩下问题 同步数据库数据并初始化ivf依然要8,9秒 问题排查 通过断点加时间打印&#xff0c;发生其实初始化ivf的时间很快&#xff0c;慢的是数据在网络间的传…

redis详细解析和配置选择

Redis是一个开源的、使用ANSI C语言编写的、基于内存亦可持久化的日志型Key-Value非关系型数据库。它以其高性能、丰富的数据结构和灵活的数据模型而广受欢迎&#xff0c;被广泛应用于缓存、消息队列、实时数据处理等多种场景。以下是对Redis的详细解析和配置选择的详细阐述。 …

Java 23 的12 个新特性!!

Java 23 来啦&#xff01;和 Java 22 一样&#xff0c;这也是一个非 LTS&#xff08;长期支持&#xff09;版本&#xff0c;Oracle 仅提供六个月的支持。下一个长期支持版是 Java 25&#xff0c;预计明年 9 月份发布。 Java 23 一共有 12 个新特性&#xff01; 有同学表示&…

图书管理系统(面向对象的编程练习)

图书管理系统&#xff08;面向对象的编程练习&#xff09; 1.系统演示2.设计框架讲解3.代码的详细讲解3.1 多本书籍的实现3.2 不同操作人员的实现3.3 不同work操作的实现 1.系统演示 下面主要展示系统的删除图书功能和显示图书功能&#xff0c;帮助大家在开始写代码前先了解图…

go的学习笔记

中文标准库文档:https://studygolang.com/pkgdoc 第一段代码 所有代码的主文件都是main.go,下面的代码直接在项目里面创建main.go运行 package main // 声明文件所在的包,每个go文件必须有归属的包import "fmt" // 引入程序需要的包,为了使用包下的函数,比如Print…

Django创建模型

1、根据创建好应用模块 python manage.py startapp tests 2、在models文件里创建模型 from django.db import modelsfrom book.models import User# Create your models here. class Tests(models.Model):STATUS_CHOICES ((0, 启用),(1, 停用),# 更多状态...)add_time mode…

tp6.0.8反序列化漏洞的一些看法

更多漏洞分析的内容&#xff0c;可前往无问社区查看http://www.wwlib.cn/index.php/artread/artid/5741.html 环境搭建 composer create-project topthink/think6.0.x-dev thinkphp-v6.0 首先构造一个反序列化点 app/controller/Index.php <?php namespace app\contro…

数据结构之哈希表

哈希表(散列表) 出现的原因 在顺序表中查找时&#xff0c;需要从表头开始&#xff0c;依次遍历比较a[i]与key的值是否相等&#xff0c;直到相等才返回索引i&#xff1b;在有序表中查找时&#xff0c;我们经常使用的是二分查找&#xff0c;通过比较key与a[i]的大小来折半查找&…

Python学习——【2.1】if语句相关语法

文章目录 【2.1】if语句相关一、布尔类型和比较运算符&#xff08;一&#xff09;布尔类型&#xff08;二&#xff09;比较运算符 二、if语句的基本格式※、练习 三、if-else组合判断语句※、练习 四、if-elif-else多条件判断语句※、练习 五、判断语句的嵌套※、实战案例 【2.…

非暴力沟通

非暴力沟通是一种有效的沟通方式&#xff0c;它可以帮助我们避免语言和行为上的暴力&#xff0c;提升人际关系的质量。这种沟通方式基于四个基本步骤&#xff1a;观察、感受、需要和请求。下面我们将详细探讨这四个步骤。 观察 观察是非暴力沟通的第一个步骤&#xff0c;它要…

Quartus sdc UI界面设置(二)

Quartus sdc设置 根据一配置quartus综合简单流程&#xff08;一&#xff09; 上次文章中&#xff0c;说了自己写sdc需要配置的分类点&#xff0c;这次将说明在UI界面配置sdc。 1. 在Quartus软件中&#xff0c;导入verilog设计之后&#xff0c;打开Tools/TimeQuest Timing Ana…

在网络环境中怎么保护个人信息安全?

在网络环境中保护个人信息安全非常重要&#xff0c;以下是一些基本的建议来帮助您保护自己的个人信息&#xff1a; 使用强密码&#xff1a;确保您的所有在线账户都使用强密码。强密码通常包含大写字母、小写字母、数字以及特殊字符&#xff0c;并且长度至少为12位以上。 启用双…

ASPICE培训:打造卓越的汽车软件开发能力

随着汽车行业的快速发展和智能化技术的不断演进&#xff0c;汽车软件开发已成为汽车制造过程中不可或缺的一部分。为了确保汽车软件的质量、可靠性和安全性&#xff0c;ASPICE&#xff08;Automotive SPICE&#xff09;作为一种国际公认的汽车软件开发过程评估标准&#xff0c;…

Docker安装 ▎Docker详细讲解 ▎数据卷挂载 ▎Nginx安装理解

前言 Docker是一种容器化技术&#xff0c;简化软件的部署和管理。文章详细解释了Docker的架构、安装步骤和常用命令&#xff0c;帮助用户快速启动和管理容器。还介绍了Docker镜像命令和数据卷挂载的实例&#xff0c;增强对持久化存储的理解&#xff0c;并涵盖了Nginx的安装方法…

红帽9中nginx-源码编译php

什么是PHP-FPM&#xff1f; PHP-FPM(FastCGI Process Manager&#xff1a; FastCGI进程管理器)是一个实现了Fastcgi的程序&#xff0c;并且提供进程管理的功能。 进程包括master进程和worker进程。master进程只有一个&#xff0c;负责监听端口&#xff0c;接受来自web server 的…