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

VUE 或 Js封装通用闭包循环滚动函数

1、vue3 闭包滚动函数的使用

js 调用也基本雷同

//  滚动Tab组件const scoreTabRef = ref()//  滚动的选项const scrollOption = ref({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 100,// 滚动历时时间scrollDuration: 1000})const autoScroll = ref()onMounted(() => {// 初始化,获取某个组件的滚动的dom元素(设置了高度的div)scrollOption.value.scrollDom = scoreTabRef.value.$el.querySelector('.v-table__wrapper')// 闭包函数,传输滚定的选项autoScroll.value = tool.autoScroll(scrollOption.value)// 执行闭包函数的滚动方法autoScroll.value.startScroll()})onUnmounted(() => {// 销毁页面,也销毁闭包内的定时器autoScroll.value.destoryScroll()})

vue3各组件内互不影响

在这里插入图片描述

2 定义 tool.js 的平滑滚动闭包函数

闭包函数仅需关心参数

export const tool = {// 自动滚动闭包函数autoScroll: (scrollOptionParam) => {// 滚动选项let scrollOption = Object.assign({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 50,// 滚动历时时间scrollDuration: 1000},scrollOptionParam)// 滚动临时结果let scrollResult = {scrollTimer: null,pauseTimer: null}// 实际滚动方法const scrollFun = () => {// 如果定时器存在if (scrollResult.scrollTimer) {// 则先清除clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null}scrollResult.scrollTimer = setInterval(() => {// 获取当前滚动条距离顶部高度const scrollTop = scrollOption.scrollDom.scrollTopconst temp = scrollTop + scrollOption.scrollSepsmoothScroll(scrollOption.scrollDom, temp, scrollOption.scrollDuration)}, scrollOption.scrollInterval)}// 平滑滚动效果const smoothScroll = (element, targetY, duration) => {const startY = element.scrollTopconst distance = targetY - startYconst startTime = performance.now()const scrollHeight = element.scrollHeightconst clientHeight = element.clientHeightconst canScroll = scrollHeight - clientHeightfunction scroll(currentTime) {const elapsed = currentTime - startTimeconst progress = Math.min(elapsed / duration, 1)const easeProgress = progress * (2 - progress)const currentY = startY + distance * easeProgresselement.scrollTop = currentY// 如果已经达到目标位置或者达到持续时间,停止动画if (progress < 1 && Math.abs(currentY - targetY) > 1) {requestAnimationFrame(scroll)} else {element.scrollTop = targetY // 确保最终位置}// 距离顶部高度  大于等于 滚动长度if (canScroll <= targetY) {// 滚动到底部 停止定时器clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = nullscrollOption.scrollDom.scrollTop = 0// 一秒后重开定时器setTimeout(() => {scrollFun()}, 1000)}}requestAnimationFrame(scroll)}const pauseScroll = () => {// 定时器不为空if (scrollResult.scrollTimer) {// 清除定时器clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null// 一秒钟后重新开始定时器scrollResult.pauseTimer = setTimeout(() => {scrollFun()}, 2000)}}return {startScroll: () => {const scrollHeight = scrollOption.scrollDom.scrollHeightconst clientHeight = scrollOption.scrollDom.clientHeightconst scroll = scrollHeight - clientHeight// 滚动长度为0,则无法实现自动滚动if (scroll === 0) {return}// 触发滚动方法scrollFun()// 去除点击监听scrollOption.scrollDom.removeEventListener('click', pauseScroll)// 重设点击监听scrollOption.scrollDom.addEventListener('click', pauseScroll, false)},destoryScroll: () => {// 清理定时器clearTimeout(scrollResult.pauseTimer)scrollResult.pauseTimer = nullclearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null// 清理点击监听scrollOption.scrollDom.removeEventListener('click', pauseScroll)}}}
}

相关文章:

VUE 或 Js封装通用闭包循环滚动函数

1、vue3 闭包滚动函数的使用 js 调用也基本雷同 // 滚动Tab组件const scoreTabRef ref()// 滚动的选项const scrollOption ref({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 100,// 滚动历时时间scrollDuration: 10…...

个人所得税计算器

个人所得税计算器 本文使用drools规则引擎根据预定义的规则计算个人所得税。我国个人所得税的纳税义务人是在中国境内居住有所得的人,以及不在中国境内居住而从中国境内取得所得的个人,包括中国国内公民,在华取得所得的外籍人员和港、澳、台同胞。个人所得税的计算公式如下…...

网络工程师----第二十四天

计算机基础 第一章&#xff1a;概述 互联网的组成&#xff1a; &#xff08;1&#xff09;边缘部分&#xff1a;由所有连接在互联网上的主机组成。这部分是用户直接使用的&#xff0c;用来进行通信&#xff08;传送数据、音频或视频&#xff09;和资源共享。 &#xff08;2…...

后端常用技能:基于easy-poi实现excel一对多、多对多导入导出【附带源码】

0. 引言 在业务系统开发中&#xff0c;我们经常遇到excel导入导出的业务场景&#xff0c;普通的excel导入导出我们可以利用 apache poi、jxl以及阿里开源的easyexcel来实现&#xff0c;特别easyexcel更是将excel的导入导出极大简化&#xff0c;但是对于一些负载的表格形式&…...

PDF转word转ppt软件

下载地址&#xff1a;PDF转word转ppt软件.zip 平时工作生活经常要用到PDF转word转ppt软件&#xff0c;电脑自带的又要开会员啥的很麻烦&#xff0c;现在分享这款软件直接激活就可以免费使用了&#xff0c;超级好用&#xff0c;喜欢的可以下载...

如何评价2023年第八届数维杯数学建模ABC题?

2024年第九届数维杯大学生数学建模挑战赛将于北京时间2024年5月10日08:00至5月13日09:00举行,竞赛倒计时17天,近期准备参加的同学还是很迷茫,不知道如何选题解题,今天整理数维杯选题策略,这里也预祝同学们在竞赛中取得好成绩! 竞赛特点 数维杯大学生数学建模挑战赛每年分…...

CentOS 7 :虚拟机网络环境配置+ 安装gcc(新手进)

虚拟机安装完centos的系统却发现无法正常联网&#xff0c;咋破&#xff01; 几个简单的步骤&#xff1a; 一、检查和设置虚拟机网络适配器 这里笔者使用的桥接模式&#xff0c;朋友们可以有不同的选项设置 二、查看宿主机的网络 以笔者的为例&#xff0c;宿主机采用wlan上网模…...

智慧法治:AI技术如何赋能法律行业创新

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…...

K-RTD01和利时FW248中控卡件

K-RTD01和利时FW248中控卡件。 系统概述 的全称为保护工程师站及录波分析后台”是利用现代计算机和网络技术&#xff0c;K-RTD01和利时FW248中控卡件。实时收集变电站运行和故障信息&#xff0c;并通过对变电站的故障信息进行综合分析&#xff0c;K-RTD01和利时FW248中控卡件。…...

[蓝桥杯]真题讲解:合并数列(双指针+贪心)

[蓝桥杯]真题讲解&#xff1a;班级活动&#xff08;贪心&#xff09; 一、视频讲解二、正解代码1、C2、python33、Java 一、视频讲解 [蓝桥杯]真题讲解&#xff1a;合并数列&#xff08;双指针贪心&#xff09; 二、正解代码 1、C #include<bits/stdc.h> #define in…...

科林Linux_4 信号

#include <signal.h> 信号signal&#xff1a;Linux或Unix系统支持的经典的消息机制&#xff0c;用于处置进程&#xff0c;挂起进程或杀死进程 kill -l #查看系统支持的信号 1~31 Unix经典信号&#xff08;软件开发工程师&#xff09; 32、33信号被系统隐藏&#xf…...

C++:map和set类

关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面 存储的是元素本身。那什么是关…...

[C/C++] -- 代理模式

代理模式是一种结构型设计模式&#xff0c;允许一个对象&#xff08;代理&#xff09;控制另一个对象的访问。代理对象通常充当客户端和实际目标对象之间的中间人&#xff0c;从而控制对目标对象的访问&#xff0c;可以在访问前后进行一些额外的处理。 代理模式的优点包括&…...

电商平台遭遇DDOS、CC攻击有什么防护方案

电商平台遭遇DDOS、CC攻击有什么防护方案&#xff1f;在数字化浪潮的推动下&#xff0c;电商平台已成为现代商业的重要组成部分&#xff0c;为消费者提供便捷、多样的购物体验。然而&#xff0c;随着业务的发展&#xff0c;电商平台也面临着日益严峻的网络安全挑战&#xff0c;…...

什么是 IIS

什么是 IIS 一、什么是 IIS二、IIS 的功能三、IIS 几点说明四、IIS 的版本五、IIS 常见的组合 欢迎关注【云边小网安】 一、什么是 IIS IIS&#xff1a;指 Internet Information Services &#xff0c;是一种由微软公司开发的 Web 服务器应用程序。IIS&#xff1a;是一种 Web …...

京东页面(黏性定位的实现)

前言: 本文章将分享一些我这周在制作京东页面的实现部分,页面表面大体和京东页面差不多,在里面加了一点script,但是很容易理解,希望大家看到可以有所收获,如果我有哪部分写的不太好,欢迎大家来跟我交流! &#x1f970;个人主页:心.c &#x1f973;文章专题:京东页面制作 &#…...

【北京迅为】《iTOP-3588从零搭建ubuntu环境手册》-第6章 安装Samba

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…...

json-server 模拟接口服务

前端开发经常需要模拟接口请求&#xff0c;可以通过 json-server 实现。 1. 安装 json-server 在前端项目的终端命令行中执行 npm i json-server2. 创建数据源 在项目中新建文件 db.json &#xff0c;与 package.json 同级&#xff0c;内容为模拟的数据 注意 json 文件对格式…...

pycharm 将项目连同库一起打包及虚拟环境的使用

目录 一、创建虚拟环境 1、用 anaconda 创建 2、Pycharm 直接创建 二、虚拟环境安装第三方库 1、创建项目后&#xff0c;启动终端(Alt F12)&#xff0c;或者点击下方标记处。 2、使用 pip 或者 conda 来进行三方库的安装或卸载 3、将项目中的库放入文档&#xff0c;便于…...

GO语言核心30讲 实战与应用 (第三​部分)

原站地址&#xff1a;Go语言核心36讲_Golang_Go语言-极客时间 一、io包中的接口和工具 1. strings.Builder、strings.Reader 和 bytes.Buffer 这些类型实现了 io 包的很多接口&#xff0c;目的是什么&#xff1f; 是为了提高不同程序实体之间的互操作性。 程序实体是指比如网…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...