vue 自定义滚动条同步拖动(移动端)

实现效果,拖动左右箭头实现图片区域同步滚动,到边缘停止拖动。

在这里插入图片描述
在这里插入图片描述

HTML代码

<template><div @touchstart="onClick"><!--使用draggable组件 图片列表区域--><draggablev-model="select_list"@end="onEnd"class="display_flex_ac list_all"id="imageAssignment"></draggable><!--自定义拖动条--><divref="container"class="scroll_bar"@touchend="endDrag"@touchcancel="endDrag"@touchstart="startDrag"@touchmove.prevent="drag"><divref="draggable"class="display_flex_ac_jc slide":style="{ transform: `translateX(${left}px)` }"><a-icon type="double-left" /><a-icon type="double-right" /></div></div></div>
</template>

JS代码

<script>
export default {data() {return {dragging: false,left: 0,startX: 0,currentX: 0,scrollWidth: 0,rollingValue: 0,containerWidth: 0,draggableWidth: 0,}},methods: {// 点击onClick(){this.containerWidth = this.$refs.container?.offsetWidth;this.draggableWidth = this.$refs.draggable?.offsetWidth;this.scrollWidth = document.getElementById("imageAssignment")?.scrollWidth;},// 拖动开始startDrag(e) {this.dragging = true;this.startX = e.touches[0].clientX - this.left;},// 拖动中drag(e) {if (this.dragging) {const minLeft = 0;const newX = e.touches[0].clientX - this.startX;const maxLeft = this.containerWidth - this.draggableWidth; // 去掉拖动元素宽度this.left = Math.max(minLeft, Math.min(maxLeft, newX)); // 当前拖动值const maxRight = this.scrollWidth - this.containerWidth; // 去掉当前屏幕this.rollingValue = this.onRolling(maxRight, maxLeft, this.left); // 计算滚动值document.getElementById("imageAssignment").scrollLeft = this.rollingValue;}},// 拖动结束endDrag() {this.dragging = false;},// 计算滚动条拖动值onRolling(maxRight, maxLeft, value) {// 计算比例关系const ratio = value / maxLeft;// 计算最终的值const finalValue = maxRight * ratio;// 返回最终值return finalValue;},// 拖动结束async onEnd(e) {// 同步滚动条位置let left = e.target.scrollLeft;const maxLeft = this.containerWidth - this.draggableWidth; // 去掉拖动元素宽度const maxRight = this.scrollWidth - this.containerWidth; // 去掉当前屏幕this.left = this.onRolling(maxLeft, maxRight, left); // 计算滚动条// 替换变化数据this.setImage_list(this.select_list);}}
}
</script>

CSS代码

.scroll_bar{width: 100%;overflow: auto;.slide{z-index: 1;height: 16px;bottom: -7px;opacity: 0.8;padding: 0 5px;position: absolute;border-radius: 5px;background: #fff;box-shadow: 0 0px 3px #999;.anticon{font-size: 12px;}}
}

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

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

相关文章

[Windows] 无需PS基础也香 Inpaint v10.2高级便携版

描述 对于经常在互联网上进行操作的学生&#xff0c;白领等&#xff01; 一款好用的软件总是能得心应手&#xff0c;事半功倍。 今天给大家带了一款高科技软件 Inpaint v10.2高级便携版 无需额外付费&#xff0c;永久免费&#xff01; 亲测可运行&#xff01;&#xff01; 内容…

AV1 编码标准中帧内预测技术概述

AV1 编码标准帧内预测 AV1&#xff08;AOMedia Video 1&#xff09;是一种开源的视频编码格式&#xff0c;旨在提供比现有标准更高的压缩效率和更好的视频质量。在帧内预测方面&#xff0c;AV1相较于其前身VP9和其他编解码标准&#xff0c;如H.264/AVC和H.265/HEVC&#xff0c;…

EMR 集群时钟同步问题及解决方案An error occurred (InvalidSignatureException)

目录 1. 问题描述2. 问题原因3. 解决过程4. 时钟同步的重要性5. Linux 系统中的时钟同步方式6. 检查 Linux 系统时钟同步状态7. EMR 集群中的时钟同步配置8. 时钟同步对大数据组件的影响9. 监控和告警策略10. 故障排除和最佳实践11. 自动化时钟同步管理12. 时钟同步与数据一致性…

C++20中的constinit说明符

constinit说明符断言(assert)变量具有静态初始化&#xff0c;即零初始化和常量初始化(zero initialization and constant initialization)&#xff0c;否则程序格式不正确(program is ill-formed)。 constinit说明符声明具有静态或线程存储持续时间(thread storage duration)的…

机器人及其相关工科专业课程体系

机器人及其相关工科专业课程体系 前言传统工科专业机械工程自动化/控制工程计算机科学与技术 新兴工科专业智能制造人工智能机器人工程 总结Reference: 前言 机器人工程专业是一个多领域交叉的前沿学科&#xff0c;涉及自然科学、工程技术、社会科学、人文科学等相关学科的理论…

ozon俄罗斯ceo丨ozon平台数据分析选品神器

ozon俄罗斯ceo是玛依妮加文特。‌作为俄罗斯最大的电子商务公司Ozon Holdings的女首席执行官&#xff0c;‌玛依妮加文特被称为俄罗斯的杰夫贝索斯&#xff08;‌亚马逊CEO&#xff09;‌。‌她在公司中发挥着重要作用&#xff0c;‌不仅负责公司的日常运营和管理&#xff0c;‌…

修改表格颜色

el-table修改表头、列的背景颜色、字体样式_el-table-column背景颜色-CSDN博客 设置表头背景颜色&#xff0c;字体 <el-table :header-cell-style"rowClass" border :data"tableDataTwo" style"width: 100%"><el-table-column width&q…

2. 白盒测试

白盒测试 1. 白盒测试定义 测试软件的内部编码和基础设施&#xff0c;重点是根据预期和期望的输出检查预定义的输入。它基于应用程序的内部工作方式&#xff0c;并围绕内部结构测试。在这种类型的测试中&#xff0c;编程测试用例需要编程技巧。白盒测试的主要目标是通过软件关…

秒懂设计模式--学习笔记(9)【结构型-装饰器模式】

目录 8、装饰器模式8.1 装饰器模式&#xff08;Decorator&#xff09;8.2 装修&#xff08;举例&#xff09;8.3 化妆&#xff08;示例&#xff09;8.4 化妆品的多样化8.5 装饰器8.6 自由嵌套8.7 装饰器模式的各角色定义8.8 装饰器模式 8、装饰器模式 8.1 装饰器模式&#xff…

红色文化3D虚拟数字展馆搭建意义深远

在房地产与土地市场的浪潮中&#xff0c;无论是新城规划、乡村振兴&#xff0c;还是商圈建设&#xff0c;借助VR全景制作、虚拟现实和web3d开发技术打造的全链条无缝VR看房新体验。不仅极大提升了带看与成交的转化率&#xff0c;更让购房者足不出户&#xff0c;即可享受身临其境…

能把进程和线程讲的这么透彻的,没有20年功夫还真不行【0基础也能看懂】

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

SQL Server 创建用户并授权

创建用户前需要有一个数据库&#xff0c;创建数据库命令如下&#xff1a; CREATE DATABASE [数据库名称]; CREATE DATABASE database1; 一、创建登录用户 方式1&#xff1a;SQL命令 命令格式&#xff1a;CREATE LOGIN [用户名] WITH PASSWORD 密码; 例如&#xff0c;创建…

FlinkErr:org/apache/hadoop/hive/ql/parse/SemanticException

在flink项目中跑 上面这段代码出现如下这个异常&#xff0c; java.lang.NoClassDefFoundError: org/apache/thrift/TException 加上下面这个依赖后不报错 <dependency> <groupId>org.apache.thrift</groupId> <artifactId>libthrift</artifactId…

Python绘制相关系数热力图

相关系数热力图是一种可视化工具&#xff0c;用于展示变量之间的相关性。它在数据分析和统计中非常有用&#xff0c;尤其是在探索数据集的内在关系时。本文将介绍如何使用Python绘制相关系数热力图。 一、准备——导入库 使用Pandas来处理数据&#xff0c;Matplotlib和Seabor…

redis笔记2

redis是用c语言写的,放不频繁更新的数据&#xff08;用户数据。课程数据&#xff09; Redis 中&#xff0c;"穿透"通常指的是缓存穿透&#xff08;Cache Penetration&#xff09;问题&#xff0c;这是指一种恶意或非法请求直接绕过缓存层&#xff0c;直接访问数据库或…

Qt | 绘制椭圆、弧、弦、扇形、圆角矩形

点击上方"蓝字"关注我们 01、简介 1、需要使用到的 QPainter 类中的函数 2、绘制椭圆的方法有 绘制给定矩形的内接椭圆和根据中心点与椭圆 x 方向和 y 方向的半径绘制,原理见下图 3、绘制弧、弦、扇形的原理: 1)、弧是椭圆上的一段曲线,因此其绘制方法就是首先…

STM32之八:IIC通信协议

目录 1. IIC协议简介 1.1 主从模式 1.2 2根通信线 2. IIC协议时序 2.1 起始条件和终止条件 2.2 发送一个字节 2.3 接收一个字节 2.4 应答信号 1. IIC协议简介 IIC协议是一个半双工、同步、一主多从、多主多从的串行通用数据总线。该通信模式需要2根线&#xff1a;SCL、…

ubuntu22.04安装SecureCRT8.7.3,完成顺利使用

材料准备 scrt-sfx安装包 &#xff0c; securecrt_linux_crack.pl 补丁脚本&#xff0c;和两个依赖库 其中securecrt_linux_crack.pl是找的专门适合 8.7.3版本的&#xff0c;网上很多版本的crack.pl只能打补丁以前的老版本。 而更老版本的SecureCRT对ubuntu22支持更不好&#…

【低照度图像增强系列(8)】URetinex-Net算法详解与代码实现(2022|CVPR)

前言 ☀️ 在低照度场景下进行目标检测任务&#xff0c;常存在图像RGB特征信息少、提取特征困难、目标识别和定位精度低等问题&#xff0c;给检测带来一定的难度。 &#x1f33b;使用图像增强模块对原始图像进行画质提升&#xff0c;恢复各类图像信息&#xff0c;再使用目标检…

hmallox勒索病毒科普:了解其威胁与防御策略

hmallox勒索病毒科普&#xff1a;了解其威胁与防御策略 一、引言 在数字化时代&#xff0c;网络安全威胁日益严峻&#xff0c;勒索病毒作为其中的一类恶意软件&#xff0c;给个人和企业带来了巨大损失。hmallox勒索病毒作为Mallox勒索软件家族的新变种&#xff0c;以其高度的…