uniapp刻度尺的实现(swiper)滑动打分器
实现图(百分制):滑动swiper进行打分,分数加减

<view class="scoring"><view class="toggle"><view class="score"><text>{{'0'}}</text><view class="scoreId" ><block v-if="transFlag&&scoreFlag">{{testScore}}</block><block v-else>{{currentScore}}</block></view><text>{{'100'}}</text></view><view><view class="line-con"><text class="line"></text></view><swiper class="swipers" display-multiple-items="17" duration="400" easing-function="easeInOutCubic" @transition="transScore" @change="changeScore" :current="currentSwiper" ><swiper-item class="swiperItems" v-for="(item,index) in 117" key="index"><view class="lines"></view></swiper-item></swiper></view></view>
</view>
/* 分数波动过程中显示实时分数*/ /*滑动过快会有问题*/
transScore(e){this.transFlag = trueif(this.transFlag&&this.scoreFlag){this.testScore = this.currentScore + Math.floor(e.detail.dx/21) <= 0? 0 :this.currentScore + Math.floor(e.detail.dx/20)}else{this.testScore = this.currentScore}
},
/*打分动作回调-停下*/
changeScore(e){this.currentScore = this.currentSwiper===null||this.currentSwiper===''?this.currentSwiper:e.detail.current;this.testScore = this.currentScorethis.currentSwiper = e.detail.current;this.transFlag = false;this.scoreFlag = false;setTimeout(()=>{this.scoreFlag = true},600)
},
.toggle{background-image: url(/static/image/toggle.png);background-size: cover;padding: 4px 4px 16px 4px;border-radius: 8px;box-shadow: 2px 6px 8px 0 #00622D17;margin-top: 16px;border-right: 1px solid #fbfcfdc2;
}
.score{display: flex;justify-content: space-between;color: #BDBDBD;font-size: 24rpx;align-items: flex-end;font-weight: bold;position: relative;height: 70rpx;margin-top: 22rpx;padding: 0 10px;.scoreId{color: #20A13E;font-size:64rpx ;position: absolute;text-align: center;width: 100%;bottom: 0px;left: 0;}
}
.swipers{height: 100%;width: 100%;margin: 0 auto;overflow: visible;height: 100rpx;
}
.swiperItems{font-size:24rpx;position:relative;margin-top: 32rpx;height: 56rpx !important;overflow: visible;display: flex;align-items: center;justify-content: center;
}
.swiperItems > .lines{background-color:#BDBDBD;width:1px;height:58rpx !important;
}
.line-con{width: 100%;position: relative;display: flex;justify-content: center;align-items: center;.line{position: absolute;width: 6rpx;height: 40px;top: 20rpx;background: #20a13e;z-index: 6;}
}
相关文章:
uniapp刻度尺的实现(swiper)滑动打分器
实现图(百分制):滑动swiper进行打分,分数加减 <view class"scoring"><view class"toggle"><view class"score"><text>{{0}}</text><view class"scoreId&quo…...
cordova Xcode打包ios以及发布流程(ionic3适用)
第一步 1、申请iOS证书 2、导入证书到钥匙串 第二步 1、xcode配置iOS证书 1.1用Xcode打开你的项目(我的Xcode版本是新版) 修改如下图 回到基本信息设置界面,Bundie 这项填写,最先创建的那个appid,跟创建iOS描述文件时选…...
idea中的.idea文件夹以及*.iml文件(新版idea没有*.iml文件了),新旧版idea打开同一个项目会不会出现不兼容
一、背景 我们有可能会在同一台电脑上安装2个 intellj idea。比如一个community edition一个ultimate edition(一个安装板一个绿色解压版) 当然了,两个idea之间可能版本号也会有差。 这篇文章就来讨论两个问题,一是关于idea产生…...
高性能网络编程 - The C10K problem 以及 网络编程技术角度的解决思路
文章目录 C10KC10K的由来C10K问题在技术层面的典型体现C10K问题的本质C10K解决思路思路一:每个进程/线程处理一个连接思路二:每个进程/线程同时处理多个连接(IO多路复用)● 实现方式1:直接循环处理多个连接● 实现方式…...
uniapp u-tabs表单如何默认选中
首先先了解该组件;该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。 …...
2023年腾讯云双11活动入口在哪里?
2023年双11腾讯云推出了11.11大促优惠活动,下面给大家分享腾讯云双11活动入口、活动时间、活动详情,希望可以助力大家轻松上云! 一、腾讯云双11活动入口 活动地址:点此直达 二、腾讯云双11活动时间 腾讯云双11活动时间跨度很长…...
Windows 下编译 TensorFlow 2.12.0 CC库
大体参考 Windows 下编译 TensorFlow 2.9.1 CC库-CSDN博客 这个版本不完整,需要从 TensorFlow 2.14.0 根目录复制 WORKSPACE 覆盖原同名文件,还需要复制TensorFlow 2.14.0 的 tensorflow\tools\toolchains\python 到相同目录。...
Spring Boot 中自动装配机制的原理
(摘自mic老师面试题) 最近一个粉丝说,他面试了 4 个公司,有三个公司问他:“Spring Boot 中自动装配 机制的原理” 他回答了,感觉没回答错误,但是怎么就没给 offer 呢? 对于这个问题…...
如何安装Wnmp并结合内网穿透实现外网访问内网Wnmp服务
文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 WNMP是Windows系统下的绿色NginxMysqlPHP环境集成套件包,安装完成后即可得到一个Nginx MyS…...
网工内推 | 上市公司,云平台运维,IP认证优先,13薪
01 上海新炬网络信息技术股份有限公司 招聘岗位:云平台运维工程师 职责描述: 1、负责云平台运维,包括例行巡检、版本发布、问题及故障处理、平台重保等,保障平台全年稳定运行; 2、参与制定运维标准规范与流程&#x…...
Linux安装DMETL4
Linux安装DMETL4 产品与环境介绍1 规划安装路径2 DM8安装路径2.1 达梦数据库程序安装路径2.2 初始化达梦数据库2.3 创建数据库用户名 DMETL 3 安装DMETL3.1 查看安装包与授权3.2 安装DMETL程序3.3 DMETL安装日志 4 启动DMETL5 DMETL连接数据库后会自动创建相关资源表6 达梦数据…...
Python中编码声明的方法
编码声明主要是为了解决编码问题。由于Python 3的默认编码是UTF-8,因此在使用Python 3编写源代码时,通常不需要在文件开头添加编码声明。但是,如果您使用的编码不是UTF-8,则需要在文件开头添加编码声明,以确保Python解…...
css设置浏览器表单自动填充时的背景
浏览器自动填充表单内容,会自动设置背景色。对于一般的用户,也许不会觉得有什么,但对于要求比较严格的用户,就会“指手画脚”。这里,我们通过css属性来设置浏览器填充背景的过渡时间,使用户看不到过渡后的背…...
windows系统下查看安卓apk的sha1
1.在apk所在文件夹打开cmd或者powershell 2.输入 certutil -hashfile xxx.apk SHA1 这样就可以了 3.指令格式 certutil -hashfile FileName [HashAlgorithm] certutil -hashfile:原样输入 FileName:文件名 HashAlgorithm:可选项包括&…...
openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述
文章目录 openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述116.1 背景信息116.2 操作步骤 openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述 116.1 背景信息 数据库安全对数据库系统来说至关重要。openGauss将用户对数据库的所有操作…...
python编程复习系列——week2(Input Output (2))
文章目录 一、多行代码语句二、Escape序列三、字符串格式四、数值运算课后作业 一、多行代码语句 🥞使用反斜杠\来表示在下一行中继续使用一条语句。 subject_code "CSCI111" subject_mark 80 subject_grade "D" result "Subject re…...
为什么HTTP用得很好的,开始普及HTTPS呢?
显而易见,现在的HTTP早已不安全,当我们在浏览各个网站时会发现HTTP前面都会显示不安全,因为HTTP是明文传输,一旦电脑被植入了木马,木马程序就会主动周期性发消息给Internet的控制终端,这样NAT小洞会一直敞开…...
C++day6作业
1.思维导图 2.编程题: 以下是一个简单的比喻,将多态概念与生活中的实际情况相联系: 比喻:动物园的讲解员和动物表演 想象一下你去了一家动物园,看到了许多不同种类的动物,如狮子、大象、猴子等。现在&am…...
【 毕设项目源码推荐 javaweb 项目】 基于 springboot+vue 的图书个性化推荐系统的设计与实现(springboot003)
简介 :::warning 【 毕设项目源码推荐 javaweb 项目】 基于 springbootvue 的图书个性化推荐系统的设计与实现适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负…...
FFmpeg编译hevc版本,支持mac、linux系统
相关前置库 openssl 仓库:https://github.com/openssl/openssl.git编译方式参考INSTALL.md中的步骤 # Unix / Linux / macOS$ ./config$ make && sudo make installlame库 如果需要处理mp3相关,依赖lame库, 仓库:https…...
AntiDupl.NET:智能图片去重工具的完整指南与核心技术解析
AntiDupl.NET:智能图片去重工具的完整指南与核心技术解析 【免费下载链接】AntiDupl A program to search similar and defect pictures on the disk 项目地址: https://gitcode.com/gh_mirrors/an/AntiDupl 在数字时代,我们每天都在创建和收集大…...
日志告警准确率从61%跃升至94.2%,MCP 2026增强版上线首周就该做的6项关键校准,晚配=漏控重大风险
更多请点击: https://intelliparadigm.com 第一章:MCP 2026日志分析增强版的核心架构演进 MCP 2026日志分析增强版摒弃了传统单体式日志管道设计,转向基于事件驱动与策略即代码(Policy-as-Code)的分层协同架构。该演…...
AI智能体记忆框架ReMe:构建可管理、可查询、可演化的知识系统
1. 项目概述:ReMe——让AI智能体拥有“记忆”的框架最近在折腾AI智能体(Agent)开发的朋友,估计都绕不开一个核心难题:怎么让这些智能体“记住”之前发生过的事情?无论是构建一个能持续对话的客服机器人&…...
用文言文和AI聊天省30%算力费用,这届年轻人的省钱思路太野了
昨天刷小红书的时候刷到个神操作,给我笑到喷饭:有个网友说他用GPT4的时候心疼额度,每次让AI写东西都叽里咕噜说一大段废话,额度哗哗掉,后来他突发奇想,用文言文跟AI聊天,结果同样的需求…...
Visual C++运行库一键修复:告别软件启动失败的终极解决方案
Visual C运行库一键修复:告别软件启动失败的终极解决方案 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 当您打开心爱的游戏或专业软件时࿰…...
开源硬件改造卡西欧F-91W:传感器扩展与极致能效实践
1. 项目概述:用开源硬件改造经典卡西欧手表 卡西欧F-91W这款1989年问世的电子表堪称工业设计史上的奇迹——它售价仅15美元却拥有惊人的可靠性,三十多年来外观几乎未变,至今仍在全球畅销。但正是这种经典设计激发了"Oddly Specific Obje…...
嵌入式开发方法
嵌入式开发方法:构建智能世界的技术基石 在当今智能化浪潮中,嵌入式系统作为连接物理世界与数字世界的桥梁,已广泛应用于智能家居、工业控制、医疗设备等领域。嵌入式开发方法的核心在于通过软硬件协同设计,实现资源受限环境下的…...
96%→100% 精度!YOLO-LSTM 新框架,刷新视频人体行为识别天花板
点击蓝字关注我们关注并星标从此不迷路计算机视觉研究院公众号ID|计算机视觉研究院学习群|扫码在主页获取加入方式https://pmc.ncbi.nlm.nih.gov/articles/PMC12084357/pdf/41598_2025_Article_1898.pdf计算机视觉研究院专栏Column of Computer Vision I…...
别再死磕标准库了!STM32CubeMX+HAL库开发实战,从零到点灯保姆级教程
从标准库到HAL库:STM32CubeMX实战LED控制全流程解析 如果你还在用标准库手动配置STM32的每一个寄存器,那么这篇文章可能会改变你的开发方式。三年前,当我第一次接触STM32CubeMX时,那种从繁琐的寄存器配置中解放出来的感觉至今难忘…...
ARM调试器符号系统解析与实战技巧
1. ARM调试器CLI符号系统核心概念解析在嵌入式开发领域,ARM RealView调试器的符号系统是连接开发者与目标硬件的关键桥梁。这套系统通过符号化的操作方式,将底层寄存器、内存地址等硬件资源抽象为可编程访问的逻辑实体。与传统的十六进制地址操作相比&am…...
