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是让你更加简单完成程序与数…...
大数据信用查询什么样的平台比较靠谱?
随着互联网的发展和普及,大数据技术逐渐应用到各行各业中,其中之一就是信用查询领域,大数据信用查询平台能够为用户提供全面、准确的大数据信用评估,然而,由于市场上出现了许多不同的大数据信用查询平台,我…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
