当前位置: 首页 > 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; 是为了提高不同程序实体之间的互操作性。 程序实体是指比如网…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...