uniapp中使用picker-view选择时间

news2024/9/20 16:47:12

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;
        },

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机组成原理（笔记3）

计算机组成原理（笔记3）

IEEE754浮点数标准 这里只讲32位单精度 S——尾数符号&#xff0c;0正1负&#xff1b; M——尾数, 纯小数表示, 小数点放在尾数域的最前面。 一般采用原码或补码表示。 E——阶码&#xff0c;采用“移码”表示; 阶符采用隐含方式&#xff0c;即采用“移码”方法来表示正负指数…
阅读更多...
杭州电子科技大学《2020年+2021年861自动控制原理真题》 (完整版）

杭州电子科技大学《2020年+2021年861自动控制原理真题》 (完整版）

本文内容&#xff0c;全部选自联盟自动化考研联盟企业店( /闲 店)的&#xff1a;《25届杭州电子科技大学861自控考研资料》的真题篇。后续会持续更新更多学校&#xff0c;更多年份的真题&#xff0c;记得关注哦~ 目录 2020年真题 2021年真题 Part1&#xff1a;20202021年完整…
阅读更多...
大舍传媒：尼日利亚传统新闻媒体宣传助力新兴行业蓬勃发展

大舍传媒：尼日利亚传统新闻媒体宣传助力新兴行业蓬勃发展

大舍传媒&#xff1a;尼日利亚传统新闻媒体宣传助力新兴行业蓬勃发展 在全球化的浪潮下&#xff0c;媒体作为信息传播的重要渠道&#xff0c;对于促进行业发展和推动社会进步扮演着举足轻重的角色。特别是在非洲大陆上人口最多、经济最发达的国家——尼日利亚&#xff0c;传统…
阅读更多...
AI 大模型开发 —— 面对转行挑战与机遇，探索有效学习开启职业转型

AI 大模型开发 —— 面对转行挑战与机遇，探索有效学习开启职业转型

前言 转行从事 AI 大模型开发是否困难&#xff1f;怎样学习才能顺利找到相关工作&#xff1f;这大概是所有新人都会面临的问题。基于此&#xff0c;我结合自身经历&#xff0c;进行了一些总结并整理出学习方法&#xff0c;期望能给大家提供一定的帮助。 1. AI 大模型开发基础…
阅读更多...
Python办公自动化案例（四）：将Excel数据批量保存到Word表格中

Python办公自动化案例（四）：将Excel数据批量保存到Word表格中

案例：将excel数据批量保存到Word表格中 要将Excel数据批量保存到Word表格中，可以使用Python的openpyxl库来读取Excel文件，以及python-docx库来创建和编辑Word文档。以下是一段示例代码，以及代码解释和一些注意事项。 准备好的Excel数据： 1.安装所需库 首先，确保你已经…
阅读更多...
线程池的执行流程总结

线程池的执行流程总结

1、提交一个线程任务&#xff0c;首先判断线程池中是否存在空闲线程&#xff1b; 存在空闲线程&#xff0c;则直接分配一个空闲线程&#xff0c;用于执行线程任务。 不存在空闲线程&#xff0c;则线程池会判断当前“存活的线程数”是否超出核心线程数&#xff08;corePoolSize&…
阅读更多...
【我的 PWN 学习手札】Tcache dup

【我的 PWN 学习手札】Tcache dup

前言 Tcache dup&#xff0c;实际上是 tcache 的 double free&#xff0c;能达到 UAF 的效果&#xff0c;实现 Tcache poisoning。 一、Tcache dup 早期 tcache 没有检查 double free&#xff0c;也没有对 counts 做检查。 对同一个大小落在 Tcachebin 的 chunk 进行 doubl…
阅读更多...
内存管理（c++）

内存管理（c++）

欢迎来到本期节目- - 内存区域 c/c中程序内存区域划分&#xff1a; 你知道它在内存的哪个区域吗&#xff1f; int global_var 1;static int static_global_var 1;void test1() {static int static_part_var 1; }这里的全局变量&#xff0c;静态全局变量&#xff0c;静态…
阅读更多...
HTML讲解（二）head部分

HTML讲解（二）head部分

目录 1. 2.的使用 2.1 charset 2.2 name 2.2.1 describe关键字 2.2.2 keywords关键字 2.2.3 author关键字 2.2.4 http-equiv 小心&#xff01;VS2022不可直接接触&#xff0c;否则&#xff01;没这个必要&#xff0c;方源面色淡然一把抓住&#xff01;顷刻炼化&#x…
阅读更多...
spring springboot 日志框架

spring springboot 日志框架

一、常见的日志框架 JUL、JCL、Jboss-logging、logback、log4j、log4j2、slf4j.... 注意&#xff1a;SLF4j 类似于接口 Log4j &#xff0c;Logback 都是出自同一作者之手 JUL 为apache 公司产品 Spring&#xff08;commons-logging&#xff09;、Hibernate&#xff08;jboss…
阅读更多...
实力再证｜海云安连续三年荣登中国网络安全产业联盟（CCIA）榜单，蝉联两届“中国网安产业成长之星”

实力再证｜海云安连续三年荣登中国网络安全产业联盟（CCIA）榜单，蝉联两届“中国网安产业成长之星”

9月6日&#xff0c;中国网络安全产业联盟&#xff08;CCIA&#xff09;正式公布了2024年中国网安产业竞争力50强、成长之星、潜力之星榜单&#xff0c;据悉&#xff0c;本次榜单调研共历时数月&#xff0c;从多个维度对调研企业进行了全面评估分析&#xff0c;遴选出2024年中国…
阅读更多...
Thingsboard规则链：GPS Geofencing Filter节点详解

Thingsboard规则链：GPS Geofencing Filter节点详解

引言 GPS Geofencing Filter节点具体作用 使用教程 源码浅析 应用场景与案例 物流与运输 农业智能化 城市安全管理 结语 http://ThingsBoard从入门到实战课程&#xff0c;深入透析底层原理&#xff0c;快速搭建自己的IOT平台_哔哩哔哩_bilibili 引言 在物联网技术迅速发…
阅读更多...
Linux文件IO（一）-open使用详解

Linux文件IO（一）-open使用详解

在 Linux 系统中要操作一个文件&#xff0c;需要先打开该文件&#xff0c;得到文件描述符&#xff0c;然后再对文件进行相应的读写操作&#xff08;或其他操作&#xff09;&#xff0c;最后在关闭该文件&#xff1b;open 函数用于打开文件&#xff0c;当然除了打开已经存在的文…
阅读更多...
2023年全国研究生数学建模竞赛华为杯C题大规模创新类竞赛评审方案研究求解全过程文档及程序

2023年全国研究生数学建模竞赛华为杯C题大规模创新类竞赛评审方案研究求解全过程文档及程序

2023年全国研究生数学建模竞赛华为杯 C题 大规模创新类竞赛评审方案研究 原题再现&#xff1a; 现在创新类竞赛很多&#xff0c;其中规模较大的竞赛&#xff0c;一般采用两阶段&#xff08;网评、现场评审&#xff09;或三阶段&#xff08;网评、现场评审和答辩&#xff09;评…
阅读更多...
C#和数据库高级：抽象类和抽象方法

C#和数据库高级：抽象类和抽象方法

文章目录 一、为什么使用抽象类和抽象方法&#xff1f;1.1、父类与子类的相互转换 二、抽象类和抽象方法2.1、抽象类的定义和方法声明规范2.2、使用继承多态的机制解决问题 三、抽象类的概念和使用特点总结 一、为什么使用抽象类和抽象方法&#xff1f; 1.1、父类与子类的相互…
阅读更多...
Facebook的用户隐私保护：从争议到革新

Facebook的用户隐私保护：从争议到革新

Facebook早期的数据收集方式引发了隐私担忧。平台的快速增长和用户数据的大规模收集使得隐私问题逐渐显现。尤其是在2018年&#xff0c;剑桥分析事件暴露了数千万用户数据被不当使用的问题。这一事件揭示了Facebook在数据保护方面的严重漏洞&#xff0c;引发了公众对隐私保护的…
阅读更多...
拓扑排序基础

拓扑排序基础

拓扑排序简要介绍及应用场景 拓扑排序&#xff1a;对图中所有节点进行排序&#xff0c;保证每个节点的前置节点都在这个节点之前。 【使用要求】&#xff1a;有向图&#xff0c;无环 拓扑排序的顺序可能不只一种。拓扑排序也可以用来判断图中有没有环存在。 拓扑排序步骤&a…
阅读更多...
【结构型】树形结构的应用王者，组合模式

【结构型】树形结构的应用王者，组合模式

目录 一、组合模式1、组合模式是什么&#xff1f;2、组合模式的主要参与者&#xff1a; 二、优化案例&#xff1a;文件系统1、不使用组合模式2、通过组合模式优化上面代码优化点&#xff1a; 三、使用组合模式有哪些优势1、统一接口&#xff0c;简化客户端代码2、递归结构处理方…
阅读更多...
maxcompute使用篇

maxcompute使用篇

文章目录 maxcompute使用篇1.mongoDB与maxcompute 进行数据同步1.1 基本类型的数据1.2部分复杂类型的数据 2.maxcompute中复杂数据类型解析2.1 get_json_object2.2 json_tuple2.3 处理json几种失效的情况:2.4 STR_TO_MAP、MAP_KEYS2.5 regexp_replace2.6 FROM_JSON2.7 nvl2.8 t…
阅读更多...
基于matlab的通信系统设计及仿真

基于matlab的通信系统设计及仿真

文章目录 前言资料获取设计介绍功能介绍设计程序具体实现截图参考文献设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023