uniapp手写滚动选择器

文章目录
- 效果展示
- HTML/Template部分:
- JavaScript部分:
- CSS部分:
- 完整代码
没有符合项目要求的选择器 就手写了一个
效果展示

实现一个时间选择器的功能,可以选择小时和分钟:
HTML/Template部分:
<picker-viewclass="sleepPage-time-picker":indicator-style="indicatorStyle":value="timeValue"@change="handleTimeChange"
><!-- 第一列:小时选择 --><picker-view-column><viewv-for="(hour, index) in hours":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[0] === index },]">{{ hour }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[0] === index">时</span></view></picker-view-column><!-- 第二列:分钟选择 --><picker-view-column><viewv-for="(minute, index) in minutes":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[1] === index },]">{{ minute }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[1] === index">分</span></view></picker-view-column>
</picker-view>
<picker-view>是一个小程序中的组件,用于实现滚动选择器效果。:indicator-style和:value是组件的属性绑定,分别用来设置选择器的样式和当前选择的值。@change是一个事件监听器,当选择器的值发生改变时会触发handleTimeChange方法。
JavaScript部分:
data() {return {timeValue: [0, 0], // 默认选中的时间值,[小时索引, 分钟索引]indicatorStyle: "height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;",hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")), // 生成小时选项数组minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")), // 生成分钟选项数组};
},
methods: {handleTimeChange(e) {this.timeValue = e.detail.value; // 更新选择的时间值// 处理选择后的逻辑,例如更新界面显示的时间console.log("Selected Time:",this.hours[this.timeValue[0]],":",this.minutes[this.timeValue[1]]);},
}
data()中定义了组件的数据状态,包括timeValue表示当前选择的小时和分钟的索引,hours和minutes分别是小时和分钟的选项数组。handleTimeChange(e)方法是一个事件处理器,用来响应选择器数值改变事件。它更新timeValue并可以执行相应的逻辑,例如打印或更新界面上显示的选择结果。
CSS部分:
.sleepPage-time-picker-box {display: flex;margin-bottom: 10px;
}
.sleepPage-time-picker {height: 90px; /* 设置选择器的高度 */width: 50%; /* 设置选择器的宽度 */margin: 2px;
}
.selected {color: rgba(40, 184, 129, 1); /* 设置选中项的文字颜色 */
}
.sleepPage-time-picker_item {text-align: center;height: 30px;line-height: 30px;position: relative;
}
.sleepPage-time-picker_item-span {padding-left: 10px;position: absolute;right: 15px;
}
- CSS 部分定义了选择器和其子元素的样式,包括选择器的整体布局和每个选项的样式,以及选中项的特殊样式。
完整代码
<picker-viewclass="sleepPage-time-picker":indicator-style="indicatorStyle":value="timeValue"@change="handleTimeChange"><picker-view-column><viewv-for="(hour, index) in hours":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[0] === index },]">{{ hour }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[0] === index">时</span></view></picker-view-column><picker-view-column><viewv-for="(minute, index) in minutes":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[1] === index },]">{{ minute }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[1] === index">分</span></view></picker-view-column></picker-view>timeValue: [0, 0],indicatorStyle:"height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;",hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")),minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")),handleTimeChange(e) {this.timeValue = e.detail.value;// 这里可以处理时间选择后的逻辑,例如更新界面显示的时间console.log("Selected Time:",this.hours[this.timeValue[0]],":",this.minutes[this.timeValue[1]]);},.sleepPage-time-picker-box {display: flex;margin-bottom: 10px;.sleepPage-time-picker {// height: 300px;height: 90px;width: 50%;margin: 2px;}.selected {color: rgba(40, 184, 129, 1);}.sleepPage-time-picker_item {text-align: center;height: 30px;line-height: 30px;position: relative;}.sleepPage-time-picker_item-span {padding-left: 10px;position: absolute;right: 15px;}}
您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。
相关文章:
uniapp手写滚动选择器
文章目录 效果展示HTML/Template部分:JavaScript部分:CSS部分:完整代码 没有符合项目要求的选择器 就手写了一个 效果展示 实现一个时间选择器的功能,可以选择小时和分钟: HTML/Template部分: <picker…...
智慧医院临床检验管理系统源码(LIS),全套LIS系统源码交付,商业源码,自主版权,支持二次开发
实验室信息系统是集申请、采样、核收、计费、检验、审核、发布、质控、查询、耗材控制等检验科工作为一体的网络管理系统。它的开发和应用将加快检验科管理的统一化、网络化、标准化的进程。一体化设计,与其他系统无缝连接,全程化条码管理。支持危机值管…...
超市是怎样高效完成客流统计与客流分析
随着科技的进步,越来越多的超市开始采用现代化的客流统计系统来优化日常运营和提升顾客体验。本文将探讨超市客流统计面临的难题、客流统计系统的构成及其应用场景,以及系统如何通过高识别率和热力图分析等功能为超市带来实际效益。 一、景区客流统计难题…...
进程地址空间,零基础最最最详解
目录 建议全文阅读!!! 建议全文阅读!!! 建议全文阅读!!! 一、什么是地址空间 1、概念 2、主要组成部分 3、特点和作用 (1)虚拟化…...
全面解锁:通过JSP和Ajax实现钉钉签到数据展示及部门筛选功能
要在JSP页面中调用钉钉的签到接口,并将签到数据展示在页面上,同时提供部门筛选功能,你可以按照以下步骤操作: 准备钉钉API: 你需要首先获取钉钉开放平台的API凭证(如access_token)。请参考钉钉开…...
LLM应用-prompt提示:让大模型总结生成PPT
参考: https://mp.weixin.qq.com/s/frKOjf4hb6yec8LzSmvQ7A 思路:通过大模型生成markdown内容,通过markdown去生成PPT 技术:Marp(https://marp.app/)这里用的这个工具进行markdown转PPT 1、让大模型生成Ma…...
安全防护软件的必要性:从微软蓝屏事件谈起
最近微软遭遇了的大规模蓝屏事件,让全球很多用户措手不及。这次事件告诉我们,保护我们的电脑和数据,安全防护软件是多么重要。 微软蓝屏事件源于网络安全公司CrowdStrike的技术更新错误,导致全球范围内大量Windows用户系统崩溃&a…...
解开基于大模型的Text2SQL的神秘面纱
你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…...
对象转化成base64-再转回对象
title: 对象转化成base64,再转回对象 date: 2024-08-01 17:54:02 tags: vue3 对象转为base64 /** 将本地对象转为base64 */ function toBase(str) {// 将对象转换为JSON字符串const jsonString JSON.stringify(str);// 使用encodeURIComponent将JSON字符串转换为UTF-8的百分…...
vue运行或打包报错 “‘node --max-old-space-size=10240“‘ 不是内部或外部命令
"node --max-old-space-size10240" 不是内部或外部命令,也不是可运行的程序 解决办法: 在 node_modules 文件夹搜索 "%_prog%" 替换成 %_prog% (即去掉双引号)...
反爬虫限制:有哪些方法可以保护网络爬虫不被限制?
目前,爬虫已经成为互联网数据获取最主流的方式。但为了保证爬虫顺利采集数据,需要防范网站的反爬虫机制,降低IP被限制的风险,这样才能提高爬虫工作的效率。那么,如何防止网络爬虫被限制呢?下面介绍几种有效…...
『 Linux 』基于阻塞队列的生产者消费者模型
文章目录 生产者-消费者模型概述生产者消费者模型的高效性虚假唤醒信号丢失生产者消费者模型的模拟实现参考代码 生产者-消费者模型概述 生产者消费者模型是一种多线程设计模式,常见于解决多个生产者线程和多个消费者线程之间如何安全有效地共享数据; 该模型中存在三种关系,两个…...
vite+typescript项目 报错:找不到模块“./*.vue”或其相应的类型声明——解决方案
declare module *.vue {import type { DefineComponent } from vueconst vueComponent: DefineComponent<{}, {}, any>export default vueComponent }...
连锁企业组网的优化解决方案
对于连锁企业来说,建立高效的网络组网很重要,因为它直接影响到各分支机构之间的信息共享、管理效率和业务流程的顺畅。一个理想的解决方案需要从多个角度入手,以确保网络的稳定性、安全性和可扩展性。 首先,需要选择合适的网络拓扑…...
网络通信---UDP
前两天做了个mplayer项目,今日继续学习 网络内容十分重要!!! 1.OSI七层模型 应用层:要传输的数据信息,如文件传输,电子邮件等(最接近用户,看传输的内容类型到底是什么) …...
从零开始学习网络安全渗透测试之基础入门篇——(四)反弹SHELL不回显带外正反向连接防火墙出入站文件上传下载
一、反弹SHELL 反弹SHELL(Reverse Shell)是一种网络攻击技术,它允许攻击者在一个被入侵的计算机上执行命令,即使该计算机位于防火墙或NAT(网络地址转换)之后。通常,当攻击者无法直接连接到目标…...
Nginx(1)
文章目录 概述基本的HTTP服务器功能其他 HTTP 服务器功能邮件代理服务器功能TCP/UDP代理服务器功能架构和可扩展性 Nginx特性web服务器负载均衡邮件代理服务器 小结 概述 Nginx是http和反向代理服务器,邮件代理服务器,以及lgor Sysoev最初编写的通用TCP…...
C# 构建观测者模式(或者为订阅者模型)
前言: 观测者模型的基本理念,就是,我有一个公共的事件,定义好他的事件的触发、数据接口。然后,通过增加订阅者(实例)来订阅这个事件的,或者说观察这个事件。如果事件发生࿰…...
MyBatis入门如何使用操作数据库及常见错误(yml配置)
一,什么是MyBatis 是一款优秀的持久层框架,用于简化jdbc的开发 持久层:指的就是持久化操作的层,通常也就是数据访问层(dao),也就是用来操作数据库。 也就是MyBatis是让你更加简单完成程序与数…...
大数据信用查询什么样的平台比较靠谱?
随着互联网的发展和普及,大数据技术逐渐应用到各行各业中,其中之一就是信用查询领域,大数据信用查询平台能够为用户提供全面、准确的大数据信用评估,然而,由于市场上出现了许多不同的大数据信用查询平台,我…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
