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 表示当前选择的小时和分钟的索引,hoursminutes 分别是小时和分钟的选项数组。
  • 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;}}

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

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

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

相关文章

『 Linux 』信号概念与信号的产生 ( 万字 )

文章目录 信号概念前台进程与后台进程信号的本质硬件理解信号的产生Core dump 标志 信号概念 "信号"一词指用来传达信息或只是的各种形式的提示或标志; 在生活中常见的信号例如红绿灯,交通标志,短信通知等 在操作系统中,"信号"是一种用于异步通知进程发生特…

[嵌入式英语]Real Time Clock

zynqmpsoc 开发手册 Real Time Clock 章节 Introduction The real time clock (RTC) unit maintains an accurate time base for system and application software. For high accuracy needs, the RTC also includes calibration circuitry to offset temperature and voltage …

JVM加载一个实现了某个接口

在Java虚拟机&#xff08;JVM&#xff09;加载类和接口时&#xff0c;加载过程本身是由多个线程来完成的&#xff0c;而不是由单个线程完成的。JVM是多线程的&#xff0c;它可以并行加载多个类和接口&#xff0c;以提高加载效率和整体应用程序的性能。 具体来说&#xff0c;JV…

国衍科技——RFID技术的应用

在文物馆藏信息的记录与管理过程中&#xff0c;准确性和详细性是至关重要的。无论是大型博物馆还是私人收藏馆&#xff0c;都需要有效的方法来确保馆藏文物信息的可追溯性和可访问性&#xff0c;才能提供更好的服务和保护馆藏资源。而结合射频识别&#xff08;RFID&#xff09;…

2024年虚拟主机转移教程

转移网站并不困难&#xff0c;但选择正确的选项和最佳程序才是关键。网站托管服务被视为当今数字世界的基石&#xff0c;全球有18 亿个网站。网站所有者可以通过下载备份、将其上传到新服务器并指向域名来手动转移网站。他们还可以通过新网站托管商的助手请求来移动网站。对于初…

华清数据结构day5 24-7-22

1>使用栈&#xff0c;完成进制转换输入&#xff1a;一个整数&#xff0c;进制数输出&#xff1a;该数的对应的进制数 seqstack.h #ifndef SEQSTACK_H #define SEQSTACK_H #define MAX 10 #include"myhead.h" typedef int datatype;typedef struct {datatype *d…

【Tomcat】快速入门

概述 Tomcat是Apache软件基金会一个核心项目&#xff0c;是一个开源免费的轻量级Web服务器&#xff0c;支持Servlet/JSP.少量avaEE规范。Tomcat Tomcat也被称为Web容器、Servlet容器。Servleti程序需要依赖于Tomcat才能运行。 安装使用 下载安装都是绿色版本&#xff0c;解…

Git、Gitlab以及分支管理

分布式版本控制系统 一、Git概述 Git是一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更。它由Linus torvalds创建的&#xff0c;最初被设计用于Linux内核的开发。Git 允许开发人员跟踪和管理代码的版本&#xff0c;并且可以在不同的开发人员之间进行协作。 Githu…

全年销售7亿块,巧克力企业如何通过相邻业务打造极致产品力?

蒂罗尔巧克力是日本经典的巧克力品牌。 糖果业务是松尾早期的主营业务&#xff0c;在主营业务下滑的情况下&#xff0c;确立新的竞争方向&#xff0c;通过主营业务优势进入相邻业务&#xff0c;打造新产品成就巧克力极致产品力&#xff0c;避免衰退重回增长。 如何通过进入相邻…

MFC列表框示例

本文仅供学习交流&#xff0c;严禁用于商业用途&#xff0c;如本文涉及侵权请及时联系本人将于及时删除 目录 1.示例内容 2.程序步骤 3.运行结果 4.代码全文 1.示例内容 编写一个对话框应用程序CMFC_Li6_4_学生信息Dlg&#xff0c;对话框中有一个列表框&#xff0c;当用户…

matlab gui下的tcp client客户端编程框架

GUI界面 函数外定义全局变量 %全局变量 global TcpClient; %matlab作为tcpip客户端 建立连接 在“连接”按钮的回调函数下添加以下代码&#xff1a; global TcpClient;%全局变量 TcpClient tcpip(‘192.168.1.10’, 7, ‘NetworkRole’,‘client’); %连接到服务器地址和端…

sqlalchemy报错sqlalchemy.orm.exc.DetachedInstanceError

解决方案&#xff1a; 在初始化数据库的代码中&#xff0c;将 maker sessionmaker(bindeng)修改为 maker sessionmaker(bindeng, expire_on_commitFalse)为什么要添加 expire_on_commitFalse 参数&#xff1f; expire_on_commit 可以用来更改 SQLAlchemy 的对象刷新机制&…

【Hot100】LeetCode—152. 乘积最大子数组

目录 题目1- 思路2- 实现⭐152. 乘积最大子数组——题解思路 3- ACM 实现 题目 原题连接&#xff1a;152. 乘积最大子数组 1- 思路 动规五部曲 2- 实现 ⭐152. 乘积最大子数组——题解思路 class Solution {public int maxProduct(int[] nums) {// 初始化答案以及以第一个元…

windows wsl ubuntu系统安装桌面可视化

参考&#xff1a; https://www.bilibili.com/read/cv33557374/ 1&#xff09;首先先安装好wsl ubuntu系统 2&#xff09;安装 Ubuntu 桌面版 sudo apt purge -y acpid acpi-support modemmanagersudo apt-mark hold acpid acpi-support modemmanager sudo apt install ubunt…

OpenSearch 实现自动化告警

本文将介绍如何使用 Amazon OpenSearch 服务设置自动化告警,并通过 SNS、Lambda 和钉钉实现告警通知。 1. 创建 SNS 主题和订阅 首先,我们需要创建一个 SNS 主题来发送通知: 登录 AWS 控制台,进入 SNS 服务。点击"创建主题",选择标准类型,为主题命名。创建主…

等保测评与业务连续性管理:确保业务不中断的安全策略

随着信息技术的飞速发展&#xff0c;企业信息化程度不断加深&#xff0c;信息安全问题日益凸显。数据泄露、网络攻击、系统瘫痪等安全事件频发&#xff0c;不仅威胁到企业的核心资产和业务连续性&#xff0c;还可能造成重大经济损失和社会影响。因此&#xff0c;构建和完善等级…

黑马头条Day09-用户行为

一、课前准备 1. long类型精度丢失问题 解决方案&#xff1a; 当后端响应给前端的数据中包含了id或者特殊标识&#xff08;可自定义&#xff09;的时候&#xff0c;把当前数据进行转换为String类型当前端传递给后端的dto中有id或者特殊标识&#xff08;可自定义&#xff09;的…

SSH跨操作系统免密文件传输

目录 一、Windows如何通过SSH向Linux系统传输文件 1.1. 安装SSH客户端&#xff1a; 1.2. 配置WinSCP&#xff1a; 1.3. 传输文件&#xff1a; 1.4. 文件传输免输入密码、RSA公钥设置流程 二、Linux系统之间的文件传输 2.1. 使用scp命令&#xff1a; 2.2. 从远程服务器下…

Windows环境下安装docker、配置Ubuntu容器并使用vscode ssh连接到容器

目录 一、Windows环境下安装docker二、配置Ubuntu三、在容器中安装ssh服务参考文章 一、Windows环境下安装docker 在任务栏中搜索**“Windows功能”** -将适用于Linux的Windows子系统和虚拟机平台选上 然后按照提示重启电脑。然后开始安装WSL。通过cmd以管理员身份打开命令提…

OSPF概述

OSPF OSPF属于内部网关路由协议【IGP】 用于单一自治系统【Autonomous System-AS】内决策路由 自治系统【AS】 执行统一路由策略的一组网络设备的组合 OSPF概述 为了适应大型的网络&#xff0c;OSPF在AS内划分多个区域 每个OSPF路由器只维护所在区域的完整的链路状态信息 …