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) {// 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.rhkb.cn/news/427128.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HarmonyOS使用LocationButton获取地理位置

HarmonyOS使用LocationButton获取地理位置

LocationButton LocationKit getAddressesFromLocation方法 步骤&#xff1a; 整合 LocationButton并获取经纬度通过 LocationKit 将经纬度转为地址信息将地址信息渲染到页面上处理异常情况&#xff08;闪退&#xff09; LocationButton({ icon: LocationIconStyle.LINE…
阅读更多...
Java lambda表达式的变量捕获

Java lambda表达式的变量捕获

有人看到这个lambda表达式能够访问isQuit这个变量而且还是可以被修改的变量&#xff0c;就发出疑问了&#xff0c;之前不是说lambda不能不或变量吗&#xff1f; 1.规则 java的lambda表达式变量捕获规则只是针对于外部作用域的局部变量来说的&#xff01;&#xff01;&#xf…
阅读更多...
LVGL 控件之仪表盘（lv_meter)

LVGL 控件之仪表盘（lv_meter)

目录 一、概述二、仪表盘部件1、添加刻度2、添加指针3、设置仪表的角度和仪表的范围4、装饰4.1 仪表指针图片4.2 仪表的指示刻度4.3 仪表弧线指示器 5、API 函数 一、概述 仪表盘部件可以非常灵活地展示数据&#xff0c;其功能包括显示弧形&#xff08;arcs&#xff09;、指针…
阅读更多...
linux_L1_linux重启服务器

linux_L1_linux重启服务器

使用putty登录到linux服务器切换到管理员账号 sudo -s重启命令 reboot
阅读更多...
22 C 语言字符处理：分类判断与转换（ASCII 码、字母大小写）函数详解

22 C 语言字符处理：分类判断与转换（ASCII 码、字母大小写）函数详解

目录 1 isdigit() 1.1 函数原型 1.2 功能说明 1.3 代码示例 2 isxdigit() 2.1 函数原型 2.2 功能说明 2.3 代码示例 3 islower() 3.1 函数原型 3.2 功能说明 3.3 代码示例 4 isupper() 4.1 函数原型 4.2 功能说明 4.3 代码示例 5 isalnum() 5.1 函数原型 5.…
阅读更多...
手工刻制微带线测试驻波与阻抗特性

手工刻制微带线测试驻波与阻抗特性

我这个电路板是1.38mm的。1oz铜厚&#xff0c;玻纤1.3mm的FR-4双面板. 通过SI9000计算出微带线的中心宽2.45-2.5mm。间隔为2mm。只想先做测试心里有数了再去打样制作板子来测试。 下面是用刻刀刻出的线&#xff0c;我先测试一下阻抗特性&#xff0c;后面拿来做一个简单的LC带通…
阅读更多...
兔子检测系统源码分享

兔子检测系统源码分享

兔子检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …
阅读更多...
vue和thinkphp路由伪静态配置

vue和thinkphp路由伪静态配置

vue路由伪静态配置&#xff1a; location / { try_files $uri $uri/ /index.html; } thinkphp 路由伪静态配置 location ~* (runtime|application)/{ return 403; } location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s$1 last; break; } }
阅读更多...
【Java 学习】：抽象类接口

【Java 学习】：抽象类接口

✨ 人逢喜事精神爽&#xff0c;月到中秋分外明 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;java学习 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f4…
阅读更多...
【代码】使用c#实现串口通信的基础模板

【代码】使用c#实现串口通信的基础模板

一、分享代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;using System.IO.Ports; using…
阅读更多...
【环境问题】清除僵尸进程 | 深度学习任务中止但是GPU仍在占用

【环境问题】清除僵尸进程 | 深度学习任务中止但是GPU仍在占用

我一般遇到这种是本地网络意外中断了&#xff0c;程序不见了&#xff0c;但是GPU仍在占用。 1.确认GPU显存&#xff1a; 终端输入 nvidia-smi 查看显存使用情况&#xff1a; 2.查看所有进程&#xff1a; 输入fuser -v /dev/nvidia* 查看进程。如果出现bash: fuser: command no…
阅读更多...
数据结构——链表（短小精悍版）

数据结构——链表（短小精悍版）

使用链表结构可以克服数组链表需要预先知道数据大小的缺点 链表结构可以充分利用计算机内存空间&#xff0c;实现灵活的内存动态管理。 但是链表失去了数组随机读取的优点&#xff0c;同时链表由于增加了结点的指针域&#xff0c;空间开销比较大。 单向链表&#xff1a; 一个…
阅读更多...
【kafka】生产者

【kafka】生产者

1. 主要参数&#xff1a; **bootstrap.servers&#xff1a;**该参数用来指定生产者客户端连接Kafka集群所需的broker地址清单&#xff0c;具体的内容格式为host1&#xff1a;port1&#xff0c;host2&#xff1a;port2&#xff0c;可以设置一个或多个地址&#xff0c;中间以逗号…
阅读更多...
《Google软件测试之道》笔记

《Google软件测试之道》笔记

介绍 GTAC&#xff1a;Google Test Automation Conference&#xff0c;Google测试自动化大会。 本书出版之前还有一本《微软测试之道》&#xff0c;值得阅读。 质量不是被测试出来的&#xff0c;但未经测试也不可能开发出有质量的软件。质量是开发过程的问题&#xff0c;而不…
阅读更多...
ROS第五梯：ROS+VSCode+C++单步调试

ROS第五梯：ROS+VSCode+C++单步调试

解决问题&#xff1a;在ROS项目中进行断点调试。 第一步&#xff1a;创建一个ROS项目或者打开一个现有的ROS项目。 第二步&#xff1a;修改c_cpp_properties.json 增加一段命令: "compileCommands": "${workspaceFolder}/build/compile_commands.json"第三…
阅读更多...
线结构光测量系统标定--导轨

线结构光测量系统标定--导轨

光平面标定原理可查看之前的博文《光平面标定》&#xff0c;光条中心提取可参考线结构光专栏光条中心提取系列的文章&#xff0c;相机标定参考相机标定专栏中的博文。&#xff08;欢迎进Q群交流&#xff1a;874653199&#xff09; 线结构光测量系统(指一个线结构光传感器与一个…
阅读更多...
rocky9虚拟机配置双网卡的详细过程

rocky9虚拟机配置双网卡的详细过程

编辑虚拟机配置->添加->选择网络适配器->确认->打开虚拟机 1.ip add查看第二个网卡的名称&#xff0c;我这里是ens36 2.cd到网卡的配置文件目录 cd /etc/NetworkManager/system-connections/ ls3.复制一份网卡的配置文件并改名为ens36.nmconnection(根据自己的第…
阅读更多...
昨天扫盘12红8，男人的第六感，今日预感8场全红

昨天扫盘12红8，男人的第六感，今日预感8场全红

阅读更多...
计算机网络（运输层）

计算机网络（运输层）

物理层、数据链路层以及网络层共同解决了将主机通过异构网络互联起来所面临的问题&#xff0c;实现了主机与主机之间的通信。 实际上在计算机网络中进行通信的真正实体事位于通信两端主机中的进程。 运输层的任务就会是提供运行在不同主机上的应用进程提供直接的通信服务&…
阅读更多...
pybind11 学习笔记

pybind11 学习笔记

pybind11 学习笔记 0. 一个例子1. 官方文档1.1 Installing the Library1.1.1 Include as A Submodule1.1.2 Include with PyPI1.1.3 Include with Conda-forge 1.2 First Steps1.2.1 Separate Files1.2.2 PYBIND11_MODULE() 宏1.2.3 example.cpython-38-x86_64-linux-gnu.so 的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023