uniapp中使用picker-view选择时间

ops/2024/9/19 10:18:00/ 标签: 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/ops/112985.html

相关文章

Phoenix使用

Phoenix Hbase适合存储大量的对关系运算要求低的NOSQL数据&#xff0c;受Hbase 设计上的限制不能直接使用原生的API执行在关系数据库中普遍使用的条件判断和聚合等操作。Hbase很优秀&#xff0c;一些团队寻求在Hbase之上提供一种更面向普通开发人员的操作方式&#xff0c;Apach…

springbootadmin源码编译修改001_node版本管理工具nvm_任意切换node版本_没有成功记录过程---VUE工作笔记0026

由于项目需要对springbootadmin的源码进行编译和修改. 但是springbootadmin的源码编译很麻烦,主要是由于,springbootadmin-server-ui这个项目,因为他是一个前后端分离的 vue项目,而且是使用 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.12 首先去下载,发…

深度学习的笔记

1. 从huggingface上仅下载pytorch模型权重和配置文件到服务器 import os import shutil from huggingface_hub import snapshot_download# 直接指定模型和下载路径 model_name openai/clip-vit-base-patch32 download_path /home/xxx/.cache/huggingface/hub/models--anas-a…

云计算实训50——Kubernetes基础命令、常用指令

一、Kubernetes 自动补齐 # 安装自动补齐软件 [rootmaster ~]# yum -y install bash-completion # 临时开启自动补齐功能 [rootmaster ~]# source # 永 久开启自动补齐功能 [rootmaster ~]# echo "source > ~/.bashrc 二、Kubernetes 基础命令 kubectl [command] …

开思通智网-科技快报20240912:人工智能辅助实现复杂糖苷分子检测

【本周新进展】 人工智能辅助实现复杂糖苷分子检测 https://news.sciencenet.cn/htmlnews/2024/9/529548.shtm IFA2024|元鼎智能推出全新“真智能”泳池机器人 https://tech.gmw.cn/2024-09/07/content_37548570.htm 马斯克宣称的“最强AI训练系统”上线 https://news.science…

产品经理学习笔记

写在前面的话 产品经理从业者的期待与迷茫 产品经理--这个号称入门容易、得道难的职业&#xff0c;随着移动互联网的快速扩张&#xff0c;发展通道已经趋于成熟&#xff0c;再不是那个野蛮生长、群星闪耀的时代了。也因此&#xff0c;行业内的产品经理普遍非常迷茫&#xff0…

Mistral AI 又又又开源了闭源企业级模型——Mistral-Small-Instruct-2409

就在不久前&#xff0c;Mistral 公司在开源了 Pixtral 12B 视觉多模态大模型之后&#xff0c;又开源了自家的企业级小型模型 Mistral-Small-Instruct-2409 &#xff08;22B&#xff09;&#xff0c;这是 Mistral AI 最新的企业级小型模型&#xff0c;是 Mistral Small v24.02 的…

使用Docker部署WordPress

今天我们在阿贝云的免费服务器上进行WordPress的部署测试。阿贝云提供的免费云服务器真是不错&#xff0c;配置为1核CPU、1G内存、10G硬盘和5M带宽&#xff0c;完全足够进行小型项目的开发与测试。这样的性能表现让人惊喜&#xff0c;适合各种开发者尝试新技术。接下来&#xf…

PMP--一模--解题--161-170

文章目录 13.干系人管理161、 [单选] 项目经理正在领导一个公司内部项目&#xff0c;该项目正处于早期阶段。该项目与一年前结束的另一个项目很相似&#xff0c;项目经理该做什么来分析涉及的干系人&#xff1f; 10.沟通管理162、 [单选] 在项目执行过程中&#xff0c;一位关键…

Oracle(126)如何使用闪回表(Flashback Table)?

Oracle数据库的闪回表&#xff08;Flashback Table&#xff09;功能允许你将一个或多个表恢复到过去的某个时刻&#xff0c;而不需要进行复杂的恢复操作。这是一个非常有用的功能&#xff0c;特别是在处理误删除数据或需要查看表在过去某一时刻的状态时。使用闪回表功能&#x…

数据结构——二叉树的介绍

1.树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#xff0c;称为根结点&a…

重放攻击(Replay Attack)与DDoS攻击简介及区别

重放攻击&#xff08;Replay Attack&#xff09;与DDoS攻击简介及区别 1. 重放攻击 简介&#xff1a;攻击者截获合法通信数据并重发&#xff0c;以伪装成用户执行未经授权的操作。目标&#xff1a;伪造身份或篡改交易。机制&#xff1a;攻击者重发数据包&#xff0c;使系统误…

html+css+js网页设计 旅游 龙门石窟8个页面

htmlcssjs网页设计 旅游 龙门石窟8个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…

Python燃烧废气排放推断算法模型

&#x1f3af;要点 宏观能耗场景模型参数化输入数据&#xff0c;分析可视化输出结果&#xff0c;使用场景时间序列数据模型及定量和定性指标使用线图和箱线图、饼图、散点图、堆积条形图、桑基图等可视化模型输出结果根据气体排放过程得出其时间序列关系&#xff0c;使用推断模…

uniapp小程序中开启微信位置权限的步骤

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…

Hive parquet表通过csv文件导入数据

1. background 已建好了 hive parquet 格式的表, 需要从服务器的csv导入数据至该hive表 2. step 提前上传csv至服务器 /path/temp.csv 创建 textfile 格式的中转表(这里使用内部表,方便删除) ,源表名dw_procurement.dwd_tc_comm_plant ,这里中转表加上了csv后缀 CREATE TA…

基于OpenCV和ROS节点的智能家居服务机器人设计流程

一、项目概述 1.1 项目目标和用途 智能家居助手项目旨在开发一款高效、智能的服务机器人&#xff0c;能够在家庭环境中执行多种任务&#xff0c;如送餐、清洁和监控。该机器人将通过自主导航、任务调度和环境感知能力&#xff0c;提升家庭生活的便利性和安全性。项目的最终目…

AI大模型系统实战:挑战与应用多领域,人工智能大模型的实际应用场景

AI大模型系统实战&#xff1a;挑战与应用多领域&#xff0c;人工智能大模型的实际应用场景 人工智能的新浪潮中&#xff0c;大模型系统已成为技术革新的重要驱动力。它们以其强大的学习能力和广泛的应用场景&#xff0c;正在重新定义我们与机器交互的方式。本文将深入探讨AI大模…

松材线虫多光谱数据集

松材线虫多光谱数据集 无人机&#xff1a;dji mavic3 mutispectral 波段&#xff1a;red green rededge nir rgb 面积&#xff1a;39.05平方公里 数据&#xff1a;rgb影像&#xff0c;四个单波段影像&#xff0c;NDVI GNDVI LCI NDRE OSAVI 5个指数图 分辨率&#xff1a;0.03&a…

深入探索Android开发之Java核心技术学习大全

Android作为全球最流行的移动操作系统之一&#xff0c;其开发技能的需求日益增长。本文将为您介绍一套专为Android开发者设计的Java核心技术学习资料&#xff0c;包括详细的学习大纲、PDF文档、源代码以及配套视频教程&#xff0c;帮助您从Java基础到高级特性&#xff0c;再到A…