当前位置：首页 > news >正文

uniapp 滚动尺

news 来源：原创 2025/9/20 6:46:13

scale组件代码（部分class样式使用到了uview1.0的样式）

<template><view><view class="scale"><view class="pointer u-flex-col u-col-center"><u-icon name="arrow-down-fill" size="26" color="#33B4C2"></u-icon></view><view class="ruler"><scroll-view class="scroll" :scroll-x="true" :scrollLeft="scrollLeft" @scroll="scaleScroll"@touchstart="touchstart" @touchend="touchend"><view class="u-col-top" style="display: inline-flex;padding: 0 calc(50%);"><template v-for="(item,index) in scale"><view :class="['line',item%10==0?'int':(item%5==0?'middle':'')]":style="{width: `${width}rpx`}" ><view class="value" v-if="item%10==0"><text>{{item/10}}</text></view></view></template></view></scroll-view></view></view></view>
</template>

<script>export default {name: 'Scale',components: {},props: {value: {type: String,default: '0.0'},// 最小值min: {type: Number,default: 0,},// 最大值max: {type: Number,default: 100,},// 每个刻度宽度width: {type: Number,default: 10,},},data() {return {scrollLeft: 0,//left:0,//isScroll: true,//用户是否停止操作scrollTimer:null,manual:false,implement:false,//是否还在滚动};},computed: {scale() {//计算出标尺所有刻度let arr = [];for (let i = this.min*10; i <= this.max * 10; i++) {arr.push(i);}return arr;},widthPx(){//每个刻度宽度return uni.upx2px(this.width);}},created() {//数据回显let val = parseFloat(this.value);if(val<=this.min){this.$emit('input',this.min.toFixed(1))}else{this.scroll()}},methods: {//滚动scaleScroll(e) {if(!this.manual){return;}//还在滚动中this.implement = true;//获取滚动距离let scrollLeft = e.detail.scrollLeft;this.left = scrollLeft;//计算对应值let index = (scrollLeft / this.widthPx).toFixed(0);let value = (this.scale[parseInt(index)]/10).toFixed(1);this.$emit('input', value);//避免重复执行@scrollclearTimeout(this.scrollTimer);this.scrollTimer = setTimeout(()=>{//判断用户是否已经停止操作if(this.isScroll){this.scroll()}},300)},//开始滚动touchstart(e) {this.isScroll = false;this.manual = true;},//用户停止操作touchend(e) {this.isScroll = true;this.implement = false;//解决scaleScroll已经执行完，但标尺未吸附问题setTimeout(()=>{//判断是否还在滚动并且是否已经吸附if(this.left!=this.scrollLeft&&!this.implement){this.scroll()}},300)},//标尺吸附scroll(){//吸附时禁止执行@scaleScroll,防止一直滚动，数据异常this.manual = false;//计算滚动距离let index = this.scale.indexOf(parseInt(this.value*10));this.scrollLeft = index * this.widthPx;}},};
</script>

<style lang="scss" scoped>.scale {width: 100%;.pointer {position: relative;padding-bottom: 12rpx;&::after {position: absolute;z-index: 9;top: 38rpx;content: '';display: block;width: 4rpx;height: 78rpx;background: #33B4C2;}}.ruler {height: 114rpx;.scroll {height: 100%;width: 100%;::-webkit-scrollbar {width: 0;height: 0;color: transparent;}.line {position: relative;height: 36rpx;display: flex;flex-direction: column;align-items: center;&:last-child{width: 2rpx !important;}&::after {content: '';position: absolute;display: block;width: 2rpx;height: 100%;top: 0;left: 0;background: #C1E8ED;}.value {left: -23rpx;position: absolute;bottom: -48rpx;width: 46rpx;height: 36rpx;font-size: 26rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #C1C1C1;line-height: 36rpx;text-align: center;}}.int {height: 66rpx;}.middle {height: 50rpx;}}}}
</style>

使用方式


<script>import Scale from '@/components/Scale/index.vue';export default {components: {Scale},data() {return {value:'10.0',}},}
</script>

<view class="value"><text>{{value}}</text></view><scale v-model="value" :width="16"></scale>

<style lang="scss">.value{padding: 36rpx 0 20rpx;font-size: 36rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #33B4C2;line-height: 50rpx;text-align: center;&::after{content: ' 公斤';height: 50rpx;font-size: 24rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #33B4C2;line-height: 50rpx;}}
</style>

uniapp 滚动尺

scale组件代码（部分class样式使用到了uview1.0的样式） <template><view><view class"scale"><view class"pointer u-flex-col u-col-center"><u-icon name"arrow-down-fill" size"26&qu…...

编程日记 2025/9/20 6:46:13

vue3之echarts3D圆柱

vue3之echarts3D圆柱效果： 版本 "echarts": "^5.1.2" 核心代码： <template><div ref"charts" class"charts"></div><svg><linearGradient id"labColor" x1"0&q…...

编程日记 2025/9/19 16:58:33

SQL 优化工具使用之 explain 详解

一、导读对于大部分开发人员来说，平常接触的无非就是增删改查这些基本操作，创建存储过程，视图等等都是 DBA 该干的活，但是想要把这些基本操作写的近乎完美也是一件难事。而 explain 显示了 MySQL 如何使用索引来处理 select 语…...

编程日记 2025/9/16 5:54:20

SpringBoot启动失败之application.yml缩进没写好

修改前： spring前面空格了报错输出：Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the follow…...

编程日记 2025/9/18 19:31:02

基于SpringBoot+vue粮油商城小程序系统

粮油商城小程序为用户提供方便快捷的在线购物体验，包括大米、面粉、食用油、调味品等各种粮油产品的选购，用户可以浏览商品详情、对比价格、下单支付等操作。同时，商城还提供优惠活动、积分兑换等福利，让用户享受到更多实惠和便利…...

编程日记 2025/9/14 13:39:17

【JavaEE进阶】Spring MVC(3)

欢迎关注个人主页：逸狼创造不易，可以点点赞吗如有错误，欢迎指出~ 返回响应返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…...

编程日记 2025/9/9 15:45:16

案例-17.文件上传-阿里云OSS-入门

一.文件上传我们在OSS页面中找到SDK下载，点击SDK示例，找到帮助文档。点击JAVA并安装在安装SDK中找到在Maven项目中加入依赖项(推荐方式) 将其中的依赖复制到pom文件中去。 <dependency><groupId>com.aliyun.oss</groupId><ar…...

编程日记 2025/9/11 22:37:05

java数据结构_优先级队列（堆）_6.2

3. 常用接口 3.1 PriorityQueue的特性 Java集合框架中提供了PriorityQueue和PriorityBlockingQueue两种类型的优先级队列，PriorityQueue的线性不安全的，PriorityBlockingQueue是线程安全的，这里主要介绍PriorityQueueu。关于PriorityQueue…...

编程日记 2025/9/15 21:44:29

如何维护和保养直线模组？

直线模组是一种常见的传动机构，被广泛应用到各种各样的设备中，如激光焊接、激光切割、涂胶机、喷涂机、小型数控机床等设备。其保养与维护对于其使用寿命和性能至关重要，为了维护和保养直线模组并确保其使用寿命，可以采取以下措施…...

编程日记 2025/9/17 1:10:52

DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/9/10 14:58:09

java连接redis

1.使用 1.创建java工程 2.引入依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>5.2.0</version> </dependency> 3. //1.获取jedis对象，把所有对redis的操作都封装到…...

编程日记 2025/9/15 7:29:28

DeepSeek掀起推理服务器新风暴，AI应用迎来变革转折点？

AI 浪潮下，推理服务器崭露头角在科技飞速发展的当下，AI 是耀眼明星，席卷各行业，深刻改变生活与工作模式，从语音助手到医疗诊断、金融风险预测，AI 无处不在。其发展分数据收集整理、模型训练、推理应用三个…...

编程日记 2025/9/14 20:14:17

宏块划分的原理

宏块划分并不是物理上的划分，而是逻辑上的划分。宏块的划分是编码器在处理视频帧时的一种逻辑操作，用于将视频帧分解为更小的编码单元，以便后续的预测、变换、量化和编码等操作。视频帧的物理存储方式（如 YUV 数据的存储顺序）并不会因为宏块的划分而发生改变。接下来，…...

编程日记 2025/9/18 12:16:07

分享8款AI生成PPT的工具！含测评

随着人工智能技术的飞速进步，制作PPT变得愈发便捷，仅需输入主题指令，便能在瞬间获得一份完整的演示文稿。尤其在制作篇幅较长的PPT时，手动编写每一页内容并设计格式和排版，不仅效率低下，而且耗时耗力。本…...

编程日记 2025/9/13 23:03:08

【NLP算法面经】字节跳动算法岗四面详细面经（★附面题总结★）

【NLP算法面经】字节跳动算法岗四面详细面经（★附面题总结★） 🌟 嗨，你好，我是青松 ！ 🌈 自小刺头深草里，而今渐觉出蓬蒿。 NLP Github 项目推荐： 【AI 藏经阁】&#…...

编程日记 2025/9/19 14:15:54

[AI相关]Unity的C#代码如何简写

是一个某培训机构的飞行棋教学源码不知道，是否有人想知道怎么可以简写 （这个问AI，DeepSeek也应该找不到答案的） 静态变量属性引用单例注入一些UnityEvent特性就不说了。。。 IL 注入运算符号改写...

编程日记 2025/9/7 14:03:11

DeepSeek模型快速部署教程-搭建自己的DeepSeek

前言：在人工智能技术飞速发展的今天，深度学习模型已成为推动各行各业智能化转型的核心驱动力。DeepSeek 作为一款领先的 AI 模型，凭借其高效的性能和灵活的部署方式，受到了广泛关注。无论是自然语言处理、图像识别，还是…...

编程日记 2025/9/15 8:28:49

TaskBuilder创建客户信息文件夹

数据模型创建好之后，我们就可以进行前后端功能的开发了。首先，我们需要创建好客户信息文件夹，以便专门存放与客户信息管理有关的前端文件，操作步骤如下： 点击销售管理示例项目“前端文件”右侧的加号按钮： …...

编程日记 2025/9/19 13:20:39

javaSE学习笔记22-线程（thread）-线程通信、线程池

线程通信应用场景：生产者和消费者问题假设仓库中只能存放一件产品，生产者将生产出来的产品放入仓库，消费者将仓库中产品取走消费如果仓库中没有产品，则生产者将产品放入仓库，否则停止生产并等待&#xff0c…...

编程日记 2025/9/19 22:31:29

解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题

解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题前言问题描述问题原因尝试过的命令及分析解决方案：修改 wsl.conf 禁用自动生成总结前言在使用 Windows Subsystem for Linux (WSL) 的 Ubuntu 子系统时，你可能会遇到 /etc/resolv.conf 文件被自动重…...

编程日记 2025/9/17 10:47:01

使用mybatis -基本的增删改查

目录项目准备项目步骤具体细节 1 主配置文件的处理 2 Test 测试类 3 在 loginMapper 接口中书写对数据库操作的方法 4 实体类 pojo 、entity 要和数据库对应的表的字段一一对应 5 在 loginMapper.xml 映射文件书写具体实现 loginMapper 接口中方法的sql 语句…...

编程日记 2025/9/16 3:52:58

通过API 调用本地部署 deepseek-r1 模型

如何本地部署 deepseek 请参考（windows 部署安装大模型 DeepSeek-R1） 那么实际使用中需要开启API模式，这样可以无拘无束地通过API集成的方式，集成到各种第三方系统和应用当中。上遍文章是基于Ollama框架运行了deepSeek R1模型…...

编程日记 2025/9/10 20:53:55

模型量化初始知识

背景 PyTorch对量化的支持目前有如下三种方式： Post Training Dynamic Quantization，模型训练完毕后的动态量化； Post Training Static Quantization，模型训练完毕后的静态量化； QAT（Quantization Aware T…...

编程日记 2025/9/17 15:26:18

成熟开发者需具备的能力

精业务 • 指深入理解和熟悉所开发软件的业务逻辑和需求。 • 开发者需要明确软件要解决的问题、面向的用户群体以及核心功能等。 • 精业务有助于开发者更好地设计系统架构、编写符合业务需求的代码，并能根据业务变化灵活调整开发计划。懂原理 • 指掌握编程的基…...

编程日记 2025/9/10 21:15:25

java练习（32）

ps：题目来自力扣环形链表给你一个链表的头节点 head ，判断链表中是否有环。如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。为了表示给定链表中的环，评测系统内部使用整数 pos 来表…...

编程日记 2025/9/18 10:52:08

linux配置网络安全服务图

系统安全防范： 1：用户与口令安全。避免使用脆弱口令，连续多次登录失败将禁止再次登录。 2：对象访问的安全性。对文件，目录和进程等对象的访问采用强制访问控制（MAC）来实现，不同的用…...

编程日记 2025/9/14 22:42:32

PTA:使用指针方式求一个给定的m×n矩阵各行元素之和

本题要求编写程序，使用指针方式求一个给定的mn矩阵各行元素之和。（例如：scanf("%d", *(matrix i) j); // 使用指针方式访问二维数组元素） 输入格式: 输入第一行给出两个正整数m和n（1<m<6, 1<n&…...

编程日记 2025/9/14 21:54:58

一.AI大模型开发-初识机器学习

机器学习基本概念前言本文主要介绍了深度学习基础，包括机器学习、深度学习的概念，机器学习的两种典型任务分类任务和回归任务，机器学习中的基础名词解释以及模型训练的基本流程等。一.认识机器学习 1.人工智能和机器学习人工智能&am…...

编程日记 2025/9/11 8:03:12

【DeepSeek服务器部署全攻略】Linux服务器部署DeepSeek R1模型、实现API调用、搭建Web页面以及专属知识库

DeepSeek R1模型的Linux服务器搭建、API访问及Web页面搭建 1，引言2，安装Ollama工具3，下载DeepSeek R1 模型4，DeepSeek命令行对话5，DeepSeek API接口远程调用6，DeepSeek结合Web-ui实现图形化界面远程访问6.1…...

编程日记 2025/9/14 13:25:40

利用多线程加速ESMC-6B模型API调用以及403Forbidden问题的解决

前言只对之前这篇文章进行了补充 403 Forbidden问题的解决这几天用了一下ESMC-6B的API，发现被403 forbidden了排查问题查来查去，发现需要翻墙才可以访问（怎么又被针对了） 于是就需要在服务器上面接入VPN，想了想…...

编程日记 2025/9/16 8:07:21

zyNo.25

SSRF漏洞在了解ssrf漏洞前先了解curl命令的使用 1.curl命令的使用基本格式：curl<参数值>请求地址 get请求：curl http://127.0.0.1 post请求：curl -X POST -d "a1&b2" http://127.0.0.1/(其中，使用-X参…...

编程日记 2025/9/20 3:15:04

golang中数组和slice的区别及使用

来自于《go语言中文文档》的学习及自我分析数组和切片的区别 golang中有两个很相似的数据结构：数组（Array）和slice。数组和slice实际有各自的优缺点和区别，这里列出最主要的区别功能点数组slice概念是同一种数据类型的固定长…...

编程日记 2025/9/19 13:29:16

撕碎QT面具（7）：container控件被spacer挤扁，无法进行控件添加的处理方案。

调节容器控件最小大小，然后把内部设计好后，对容器使用水平布局或垂直布局。这样容器的控件就不会被挤扁。...

编程日记 2025/9/7 16:15:59

2月19号

寒假每天敲代码的过程中,从先前的什么都不懂,在一步步看题解,学习新知识,运用学到的知识,解决问题,很多时候对数据结构和算法的选择有问题,不能准确选择,这个时候还是得多敲代码,就我自己而言,代码敲多了会让自己更熟练掌握这个知识点,也能更好的去运用,遇到相似的问题还可以举…...

编程日记 2025/9/19 20:01:59

EX_25/2/19

1. 封装一个 File 类，用有私有成员 File* fp 实现以下功能 File f "文件名" 要求打开该文件 f.write(string str) 要求将str数据写入文件中 string str f.read(int size) 从文件中读取最多size个字节，并将读取到的数据返回析构函数 …...

编程日记 2025/9/10 3:59:33

纯新手教程：用llama.cpp本地部署DeepSeek蒸馏模型

0. 前言 llama.cpp是一个基于纯C/C实现的高性能大语言模型推理引擎，专为优化本地及云端部署而设计。其核心目标在于通过底层硬件加速和量化技术，实现在多样化硬件平台上的高效推理，同时保持低资源占用与易用性。最近DeepSeek太火了&#x…...

编程日记 2025/9/13 15:09:05

ubuntu源码方式安装TensorRT-LLM推理框架

简要记录安装过程和遇到的问题写在前面： 一切的二手安装教程都不如官方手册，建议先根据手册进行安装，遇到问题再自行谷歌： TensorRT官方文档先安装docker TensorRT-LLM 官方推荐使用 Docker 进行构建和运行 ubuntu安装docker…...

编程日记 2025/9/16 7:34:15

集合数据结构泛型

文章目录 1.Collection集合1.1数组和集合的区别【理解】1.2集合类体系结构【理解】1.3Collection 集合概述和使用【应用】内部类匿名内部类Lambda表达式 1.4Collection集合的遍历【应用】1.5增强for循环【应用】 2.List集合2.1List集合的概述和特点【记忆】2.2List集合的特有方…...

编程日记 2025/9/19 14:27:41

python脚本文件设置进程优先级（在.py文件中实现）

在 Python 代码中可以直接通过 psutil 模块或系统调用来设置进程优先级，无需依赖终端命令。以下是具体方法和示例： 1. 使用 psutil 模块（跨平台推荐） psutil 是一个跨平台库，支持 Windows、Linux 和 macOS。通过其 …...

编程日记 2025/9/20 8:44:29

Docker 安装 Apache

Docker 安装 Apache 引言 Apache HTTP Server（简称Apache）是一个开源的HTTP服务器软件，广泛应用于各种操作系统和平台。Docker作为一种容器化技术，可以简化Apache的部署过程，使得其能够在任何环境中快速部署。本文将详细介绍如何在Docker容器中安装Apache。准备工作 …...

编程日记 2025/9/15 11:09:43

实在智能与宇树科技、云深科技一同获评浙江省“人工智能服务商”、 “数智优品”等荣誉

近日，浙江省经信厅正式公布《2024 年浙江省人工智能应用场景、应用标杆企业、人工智能服务商及 “数智优品” 名单》。实在智能获评浙江省“人工智能服务商”，核心产品 “实在 Agent 智能体” 入选 “数智优品”。一同获此殊荣的还有宇树科技、云深处科…...

编程日记 2025/9/15 3:43:46

C语言指针学习笔记

1. 指针的定义指针（Pointer）是存储变量地址的变量。在C语言中，指针是一种非常重要的数据类型，通过指针可以直接访问和操作内存。 2. 指针的声明与初始化 2.1 指针声明指针变量的声明格式为：数据类型 *指针变量名…...

编程日记 2025/9/7 16:15:45

管道的学习

进程间通信：是指在操作系统中，两个或多个独立的进程之间进行数据交换和信息共享的一种机制进程间通信的本质：先让不同的进程先看到同一份资源，才有通信的条件进程间通信的目的： 1.将一个进程的数据发送给另一个进程…...

编程日记 2025/9/20 8:50:49

迪威模型网：免费畅享 3D 打印盛宴，科技魅力与趣味创意并存

还在为寻找优质3D打印模型而发愁？快来迪威模型网（https://www.3dwhere.com/），一个集前沿科技与无限趣味于一体的免费3D打印宝藏平台！ 踏入迪威模型网，仿佛开启一场未来科技之旅。其“3D打印”专区&#xff…...

编程日记 2025/9/18 13:06:54

Java运算符

- 算术运算符 - 正号 - - 负号 - 加号 - - 减号 - * 乘号 - / 除 - % 取余 - 自增（前） 先运算后取值 i； 自增（后） 先取值后运算 i； public cla…...

编程日记 2025/9/19 10:30:47

Kimi K1.5 与 DeepSeek R1：AI 模型的深度对比

文章目录一、背景介绍二、核心功能对比三、K1.5 使用方法：四、总结随着人工智能技术的飞速发展，大型语言模型在各个领域都展现出了巨大的潜力。Kimi K1.5 和 DeepSeek R1 作为当前备受关注的两款先进 AI 模型，各自拥有独特的功能和优势。本…...

编程日记 2025/9/15 7:07:46

mysql索引为什么用B+树不用，B树或者红黑树

MySQL 选择 B 树作为索引结构，而不是 B 树或红黑树，主要原因如下： 1. 磁盘 I/O 优化 B 树：节点存储更多键值，树的高度较低，减少了磁盘 I/O 次数，适合处理大规模数据。 B 树：虽然也…...

编程日记 2025/9/19 1:37:51

Redis 全方位解析：从入门到实战

引言在当今互联网快速发展的时代，高并发、低延迟的应用场景越来越普遍。Redis，作为一款高性能的开源数据库，以其卓越的性能和灵活的功能，成为了许多开发者的首选工具。无论是在缓存、消息队列，还是在实时数据分析等领…...

编程日记 2025/9/10 22:35:41

无第三方依赖 go 语言工具库

- 开源地址 GitHub - zdhsoft/xmutilsgo: utils for go - 使用办法 go get github.com/zdhsoft/xmutilsgo 主要内容 int.go 定义泛型的整数类型和字符串转整数的函数和随机范围的函数isin.go 判断指定元素是否再数组中的函数page.go mysql用于分页的类ret.go 通用返回值的类…...

编程日记 2025/9/12 4:32:22

代码随想录算法【Day49】

Day49 42. 接雨水思路这道题利用单调栈进行横向求解。对于每一个元素，找到它右边第一个比它大的元素和左边第一个比它大（或者与它相等的元素，当然这种情况可以忽略），最后计算雨水的存储量：&#xff08…...

编程日记 2025/9/17 22:30:12

相关文章：