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

vue-seamless-scroll 结束从头开始，加延时后滚动

news 来源：原创 2025/5/31 11:42:55

今天遇到一个大屏需求：
1️⃣初始进入页面停留5秒，然后开始滚动

2️⃣最后一条数据出现在最后一行时候暂停5秒，然后返回1️⃣

依次循环，发现vue-seamless-scroll的方法 ScrollEnd是监测最后一条数据消失在第一行才回调，不能满足我的需求，于是在node_modules里面找到他的文件重写

主要优化点

// 上

 if (Math.abs(this.yPos) >= this.realBoxHeight - 520) 

this.realBoxHeight是你所有数据加起来的行高， 520是可视区域的行高， yPos是向上滚动的距离，是个负值，滚动了一行，假设行高40，那就是  -40

 // 到达底部时暂停5秒

              this._stopMove()

              setTimeout(() => {

                this.yPos = 0

                // 重置位置后也暂停5秒再开始滚动

                setTimeout(() => {

                  this._startMove()

                }, 5000)

              }, 5000)

我修改完成的文件

<template><div ref="wrap"><div:style="leftSwitch"v-if="navigation":class="leftSwitchClass"@click="leftSwitchClick"><slot name="left-switch"></slot></div><div:style="rightSwitch"v-if="navigation":class="rightSwitchClass"@click="rightSwitchClick"><slot name="right-switch"></slot></div><divref="realBox":style="pos"@mouseenter="enter"@mouseleave="leave"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"><div ref="slotList" :style="float"><slot></slot></div><div v-html="copyHtml" :style="float"></div></div></div>
</template><script>
require('comutils/animationFrame')()
const arrayEqual = require('comutils/arrayEqual')
const copyObj = require('comutils/copyObj')
export default {name: 'vue-seamless-scroll',data() {return {xPos: 0,yPos: 0,delay: 0,copyHtml: '',height: 0,width: 0, // 外容器宽度realBoxWidth: 0 // 内容实际宽度}},props: {data: {type: Array,default: () => {return []}},classOption: {type: Object,default: () => {return {}}}},computed: {leftSwitchState() {return this.xPos < 0},rightSwitchState() {return Math.abs(this.xPos) < this.realBoxWidth - this.width},leftSwitchClass() {return this.leftSwitchState ? '' : this.options.switchDisabledClass},rightSwitchClass() {return this.rightSwitchState ? '' : this.options.switchDisabledClass},leftSwitch() {return {position: 'absolute',margin: `${this.height / 2}px 0 0 -${this.options.switchOffset}px`,transform: 'translate(-100%,-50%)'}},rightSwitch() {return {position: 'absolute',margin: `${this.height / 2}px 0 0 ${this.width +this.options.switchOffset}px`,transform: 'translateY(-50%)'}},float() {return this.isHorizontal? { float: 'left', overflow: 'hidden' }: { overflow: 'hidden' }},pos() {return {transform: `translate(${this.xPos}px,${this.yPos}px)`,transition: `all ${this.ease} ${this.delay}ms`,overflow: 'hidden'}},defaultOption() {return {step: 0.25, //步长limitMoveNum: 14, //启动无缝滚动最小数据数hoverStop: true, //是否启用鼠标hover控制direction: 1, // 0 往下 1 往上 2向左 3向右openTouch: true, //开启移动端touchsingleHeight: 0, //单条数据高度有值hoverStop关闭singleWidth: 0, //单条数据宽度有值hoverStop关闭waitTime: 1000, //单步停止等待时间switchOffset: 30,autoPlay: true,navigation: false,switchSingleStep: 134,switchDelay: 400,switchDisabledClass: 'disabled',isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量}},options() {return copyObj({}, this.defaultOption, this.classOption)},navigation() {return this.options.navigation},autoPlay() {if (this.navigation) return falsereturn this.options.autoPlay},scrollSwitch() {return this.data.length >= this.options.limitMoveNum},hoverStopSwitch() {return this.options.hoverStop && this.autoPlay && this.scrollSwitch},canTouchScroll() {return this.options.openTouch},isHorizontal() {return this.options.direction > 1},baseFontSize() {return this.options.isSingleRemUnit? parseInt(window.getComputedStyle(document.documentElement, null).fontSize): 1},realSingleStopWidth() {return this.options.singleWidth * this.baseFontSize},realSingleStopHeight() {return this.options.singleHeight * this.baseFontSize},step() {let singleSteplet step = this.options.stepif (this.isHorizontal) {singleStep = this.realSingleStopWidth} else {singleStep = this.realSingleStopHeight}if (singleStep > 0 && singleStep % step > 0) {console.error('如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~')}return step}},methods: {reset() {this._cancle()this._initMove()},leftSwitchClick() {if (!this.leftSwitchState) return// 小于单步距离if (Math.abs(this.xPos) < this.options.switchSingleStep) {this.xPos = 0return}this.xPos += this.options.switchSingleStep},rightSwitchClick() {if (!this.rightSwitchState) return// 小于单步距离if (this.realBoxWidth - this.width + this.xPos <this.options.switchSingleStep) {this.xPos = this.width - this.realBoxWidthreturn}this.xPos -= this.options.switchSingleStep},_cancle() {cancelAnimationFrame(this.reqFrame || '')},touchStart(e) {if (!this.canTouchScroll) returnlet timerconst touch = e.targetTouches[0] //touches数组对象获得屏幕上所有的touch，取第一个touchconst { waitTime, singleHeight, singleWidth } = this.optionsthis.startPos = {x: touch.pageX,y: touch.pageY} //取第一个touch的坐标值this.startPosY = this.yPos //记录touchStart时候的posYthis.startPosX = this.xPos //记录touchStart时候的posXif (!!singleHeight && !!singleWidth) {if (timer) clearTimeout(timer)timer = setTimeout(() => {this._cancle()}, waitTime + 20)} else {this._cancle()}},touchMove(e) {//当屏幕有多个touch或者页面被缩放过，就不执行move操作if (!this.canTouchScroll ||e.targetTouches.length > 1 ||(e.scale && e.scale !== 1))returnconst touch = e.targetTouches[0]const { direction } = this.optionsthis.endPos = {x: touch.pageX - this.startPos.x,y: touch.pageY - this.startPos.y}event.preventDefault() //阻止触摸事件的默认行为，即阻止滚屏const dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //dir，1表示纵向滑动，0为横向滑动if (dir === 1 && direction < 2) {// 表示纵向滑动 && 运动方向为上下this.yPos = this.startPosY + this.endPos.y} else if (dir === 0 && direction > 1) {// 为横向滑动 && 运动方向为左右this.xPos = this.startPosX + this.endPos.x}},touchEnd() {if (!this.canTouchScroll) returnlet timerconst direction = this.options.directionthis.delay = 50if (direction === 1) {if (this.yPos > 0) this.yPos = 0} else if (direction === 0) {let h = (this.realBoxHeight / 2) * -1if (this.yPos < h) this.yPos = h} else if (direction === 2) {if (this.xPos > 0) this.xPos = 0} else if (direction === 3) {let w = this.realBoxWidth * -1if (this.xPos < w) this.xPos = w}if (timer) clearTimeout(timer)timer = setTimeout(() => {this.delay = 0this._move()}, this.delay)},enter() {if (this.hoverStopSwitch) this._stopMove()},leave() {if (this.hoverStopSwitch) this._startMove()},_move() {// 鼠标移入时拦截_move()if (this.isHover) returnthis._cancle() //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行this.reqFrame = requestAnimationFrame(function() {const h = this.realBoxHeight / 2 //实际高度const w = this.realBoxWidth / 2 //宽度let { direction, waitTime } = this.optionslet { step } = thisif (direction === 1) {// 上if (Math.abs(this.yPos) >= this.realBoxHeight - 520) {this.$emit('ScrollEnd')// 到达底部时暂停5秒this._stopMove()setTimeout(() => {this.yPos = 0// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.yPos -= step} else if (direction === 0) {// 下if (this.yPos >= 0) {this.$emit('ScrollEnd')// 到达顶部时暂停5秒this._stopMove()setTimeout(() => {this.yPos = h * -1// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.yPos += step} else if (direction === 2) {// 左if (Math.abs(this.xPos) >= w) {this.$emit('ScrollEnd')// 到达左边界时暂停5秒this._stopMove()setTimeout(() => {this.xPos = 0// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.xPos -= step} else if (direction === 3) {// 右if (this.xPos >= 0) {this.$emit('ScrollEnd')// 到达右边界时暂停5秒this._stopMove()setTimeout(() => {this.xPos = w * -1// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.xPos += step}// 移除单步滚动逻辑，改为连续滚动this._move()}.bind(this))},_initMove() {this.$nextTick(() => {const { switchDelay } = this.optionsconst { autoPlay, isHorizontal } = thisthis._dataWarm(this.data)this.copyHtml = '' //清空copyif (isHorizontal) {this.height = this.$refs.wrap.offsetHeightthis.width = this.$refs.wrap.offsetWidthlet slotListWidth = this.$refs.slotList.offsetWidththis.$refs.realBox.style.width = slotListWidth + 'px'this.realBoxWidth = slotListWidth}if (autoPlay) {this.ease = 'ease-in'this.delay = 0} else {this.ease = 'linear'this.delay = switchDelayreturn}// 是否可以滚动判断if (this.scrollSwitch) {let timerif (timer) clearTimeout(timer)this.realBoxHeight = this.$refs.realBox.offsetHeight// 初始化时暂停5秒后开始滚动setTimeout(() => {this._move()}, 5000)} else {this._cancle()this.yPos = this.xPos = 0}})},_dataWarm(data) {if (data.length > 100) {console.warn(`数据达到了${data.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`)}},_startMove() {this.isHover = false //开启_movethis._move()},_stopMove() {this.isHover = true //关闭_movethis._cancle()}},watch: {data(newData, oldData) {this._dataWarm(newData)// 每次数据更新都重置滚动this.yPos = 0this.xPos = 0this._stopMove()// 5秒后开始新的滚动setTimeout(() => {if (this.data.length >= this.options.limitMoveNum) {this._initMove()this._startMove()}}, 5000)},autoPlay(bol) {if (bol) {this.reset()} else {this._stopMove()}}},beforeCreate() {this.reqFrame = null // move动画的animationFrame定时器this.isHover = false // mouseenter mouseleave 控制this._move()的开关this.ease = 'ease-in'},beforeDestroy() {this._cancle()}
}
</script>

源文件

<template><div ref="wrap"><div:style="leftSwitch"v-if="navigation":class="leftSwitchClass"@click="leftSwitchClick"><slot name="left-switch"></slot></div><div:style="rightSwitch"v-if="navigation":class="rightSwitchClass"@click="rightSwitchClick"><slot name="right-switch"></slot></div><divref="realBox":style="pos"@mouseenter="enter"@mouseleave="leave"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"><div ref="slotList" :style="float"><slot></slot></div><div v-html="copyHtml" :style="float"></div></div></div>
</template><script>require('comutils/animationFrame')()const arrayEqual = require('comutils/arrayEqual')const copyObj = require('comutils/copyObj')export default {name: 'vue-seamless-scroll',data () {return {xPos: 0,yPos: 0,delay: 0,copyHtml: '',height: 0,width: 0, // 外容器宽度realBoxWidth: 0, // 内容实际宽度}},props: {data: {type: Array,default: () => {return []}},classOption: {type: Object,default: () => {return {}}}},computed: {leftSwitchState () {return this.xPos < 0},rightSwitchState () {return Math.abs(this.xPos) < (this.realBoxWidth - this.width)},leftSwitchClass () {return this.leftSwitchState ? '' : this.options.switchDisabledClass},rightSwitchClass () {return this.rightSwitchState ? '' : this.options.switchDisabledClass},leftSwitch () {return {position: 'absolute',margin: `${this.height / 2}px 0 0 -${this.options.switchOffset}px`,transform: 'translate(-100%,-50%)'}},rightSwitch () {return {position: 'absolute',margin: `${this.height / 2}px 0 0 ${this.width + this.options.switchOffset}px`,transform: 'translateY(-50%)'}},float () {return this.isHorizontal ? { float: 'left', overflow: 'hidden' } : { overflow: 'hidden' }},pos () {return {transform: `translate(${this.xPos}px,${this.yPos}px)`,transition: `all ${this.ease} ${this.delay}ms`,overflow: 'hidden'}},defaultOption () {return {step: 1, //步长limitMoveNum: 5, //启动无缝滚动最小数据数hoverStop: true, //是否启用鼠标hover控制direction: 1, // 0 往下 1 往上 2向左 3向右openTouch: true, //开启移动端touchsingleHeight: 0, //单条数据高度有值hoverStop关闭singleWidth: 0, //单条数据宽度有值hoverStop关闭waitTime: 1000, //单步停止等待时间switchOffset: 30,autoPlay: true,navigation: false,switchSingleStep: 134,switchDelay: 400,switchDisabledClass: 'disabled',isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量}},options () {return copyObj({}, this.defaultOption, this.classOption)},navigation () {return this.options.navigation},autoPlay () {if (this.navigation) return falsereturn this.options.autoPlay},scrollSwitch () {return this.data.length >= this.options.limitMoveNum},hoverStopSwitch () {return this.options.hoverStop && this.autoPlay && this.scrollSwitch},canTouchScroll () {return this.options.openTouch},isHorizontal () {return this.options.direction > 1},baseFontSize () {return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1},realSingleStopWidth () {return this.options.singleWidth * this.baseFontSize},realSingleStopHeight () {return this.options.singleHeight * this.baseFontSize},step () {let singleSteplet step = this.options.stepif (this.isHorizontal) {singleStep = this.realSingleStopWidth} else {singleStep = this.realSingleStopHeight}if (singleStep > 0 && singleStep % step > 0) {console.error('如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~')}return step}},methods: {reset () {this._cancle()this._initMove()},leftSwitchClick () {if (!this.leftSwitchState) return// 小于单步距离if (Math.abs(this.xPos) < this.options.switchSingleStep) {this.xPos = 0return}this.xPos += this.options.switchSingleStep},rightSwitchClick () {if (!this.rightSwitchState) return// 小于单步距离if ((this.realBoxWidth - this.width + this.xPos) < this.options.switchSingleStep) {this.xPos = this.width - this.realBoxWidthreturn}this.xPos -= this.options.switchSingleStep},_cancle () {cancelAnimationFrame(this.reqFrame || '')},touchStart (e) {if (!this.canTouchScroll) returnlet timerconst touch = e.targetTouches[0] //touches数组对象获得屏幕上所有的touch，取第一个touchconst { waitTime, singleHeight, singleWidth } = this.optionsthis.startPos = {x: touch.pageX,y: touch.pageY} //取第一个touch的坐标值this.startPosY = this.yPos //记录touchStart时候的posYthis.startPosX = this.xPos //记录touchStart时候的posXif (!!singleHeight && !!singleWidth) {if (timer) clearTimeout(timer)timer = setTimeout(() => {this._cancle()}, waitTime + 20)} else {this._cancle()}},touchMove (e) {//当屏幕有多个touch或者页面被缩放过，就不执行move操作if (!this.canTouchScroll || e.targetTouches.length > 1 || e.scale && e.scale !== 1) returnconst touch = e.targetTouches[0]const { direction } = this.optionsthis.endPos = {x: touch.pageX - this.startPos.x,y: touch.pageY - this.startPos.y}event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏const dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //dir，1表示纵向滑动，0为横向滑动if (dir === 1 && direction < 2) {  // 表示纵向滑动 && 运动方向为上下this.yPos = this.startPosY + this.endPos.y} else if (dir === 0 && direction > 1) { // 为横向滑动 && 运动方向为左右this.xPos = this.startPosX + this.endPos.x}},touchEnd () {if (!this.canTouchScroll) returnlet timerconst direction = this.options.directionthis.delay = 50if (direction === 1) {if (this.yPos > 0) this.yPos = 0} else if (direction === 0) {let h = this.realBoxHeight / 2 * -1if (this.yPos < h) this.yPos = h} else if (direction === 2) {if (this.xPos > 0) this.xPos = 0} else if (direction === 3) {let w = this.realBoxWidth * -1if (this.xPos < w) this.xPos = w}if (timer) clearTimeout(timer)timer = setTimeout(() => {this.delay = 0this._move()}, this.delay)},enter () {if (this.hoverStopSwitch) this._stopMove()},leave () {if (this.hoverStopSwitch) this._startMove()},_move () {// 鼠标移入时拦截_move()if (this.isHover) returnthis._cancle() //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行this.reqFrame = requestAnimationFrame(function () {const h = this.realBoxHeight / 2  //实际高度const w = this.realBoxWidth / 2 //宽度let { direction, waitTime } = this.optionslet { step } = thisif (direction === 1) { // 上if (Math.abs(this.yPos) >= h) {this.$emit('ScrollEnd')this.yPos = 0}this.yPos -= step} else if (direction === 0) { // 下if (this.yPos >= 0) {this.$emit('ScrollEnd')this.yPos = h * -1}this.yPos += step} else if (direction === 2) { // 左if (Math.abs(this.xPos) >= w) {this.$emit('ScrollEnd')this.xPos = 0}this.xPos -= step} else if (direction === 3) { // 右if (this.xPos >= 0) {this.$emit('ScrollEnd')this.xPos = w * -1}this.xPos += step}if (this.singleWaitTime) clearTimeout(this.singleWaitTime)if (!!this.realSingleStopHeight) { //是否启动了单行暂停配置if (Math.abs(this.yPos) % this.realSingleStopHeight < step) { // 符合条件暂停waitTimethis.singleWaitTime = setTimeout(() => {this._move()}, waitTime)} else {this._move()}} else if (!!this.realSingleStopWidth) {if (Math.abs(this.xPos) % this.realSingleStopWidth < step) { // 符合条件暂停waitTimethis.singleWaitTime = setTimeout(() => {this._move()}, waitTime)} else {this._move()}} else {this._move()}}.bind(this))},_initMove () {this.$nextTick(() => {const { switchDelay } = this.optionsconst { autoPlay, isHorizontal } = thisthis._dataWarm(this.data)this.copyHtml = '' //清空copyif (isHorizontal) {this.height = this.$refs.wrap.offsetHeightthis.width = this.$refs.wrap.offsetWidthlet slotListWidth = this.$refs.slotList.offsetWidth// 水平滚动设置warp widthif (autoPlay) {// 修正offsetWidth四舍五入slotListWidth = slotListWidth * 2 + 1}this.$refs.realBox.style.width = slotListWidth + 'px'this.realBoxWidth = slotListWidth}if (autoPlay) {this.ease = 'ease-in'this.delay = 0} else {this.ease = 'linear'this.delay = switchDelayreturn}// 是否可以滚动判断if (this.scrollSwitch) {let timerif (timer) clearTimeout(timer)this.copyHtml = this.$refs.slotList.innerHTMLsetTimeout(() => {this.realBoxHeight = this.$refs.realBox.offsetHeightthis._move()}, 0);} else {this._cancle()this.yPos = this.xPos = 0}})},_dataWarm (data) {if (data.length > 100) {console.warn(`数据达到了${data.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`);}},_startMove () {this.isHover = false //开启_movethis._move()},_stopMove () {this.isHover = true //关闭_move// 防止频频hover进出单步滚动,导致定时器乱掉if (this.singleWaitTime) clearTimeout(this.singleWaitTime)this._cancle()},},mounted () {this._initMove()},watch: {data (newData, oldData) {this._dataWarm(newData)//监听data是否有变更if (!arrayEqual(newData, oldData)) {this.reset()}},autoPlay (bol) {if (bol) {this.reset()} else {this._stopMove()}}},beforeCreate () {this.reqFrame = null // move动画的animationFrame定时器this.singleWaitTime = null // single 单步滚动的定时器this.isHover = false // mouseenter mouseleave 控制this._move()的开关this.ease = 'ease-in'},beforeDestroy () {this._cancle()clearTimeout(this.singleWaitTime)}}
</script>

相关文章：

  • 影楼精修-AI追色算法解析
  • 定点小数 不需要指数部分 不采用移码
  • 网络渗透基础：信息收集
  • Animate CC CreateJS 技术50道测试题目
  • Python应用while嵌套循环
  • MySQL 索引和事务
  • 【JavaScript 高级】事件循环机制详解
  • 如何站在指标体系之巅看智能数据建模产品(GAI)
  • docker常见考点
  • JS入门——JS引入方式
  • 收集飞花令碎片——C语言（数组+函数）
  • 简单三步FastAdmin 开源框架的安装
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Split Landing Page（拆分展示页）
  • 小白畅通Linux之旅-----Linux日志管理
  • 软件无线电技术之基带QPSK 调制技术+扩频技术
  • GB/T 14833-2020 合成材料运动场地面层检测
  • 【2025年电工杯数学建模竞赛A题】光伏电站发电功率日前预测问题+完整思路+paper+源码
  • 德思特新闻 | 德思特与es:saar正式建立合作伙伴关系
  • Vue-Router 基础使用
  • 2.2.1 05年T4
  • 做3d模型的叫什么牛的网站/太原seo排名公司
  • 做企业网站报价/长沙seo平台
  • 东莞专业网站制作设计/营销策划书格式及范文
  • wordpress条件搜索/刷关键词排名seo
  • 一般公司网站的后台管理在哪/南昌seo代理商
  • 用手机制作网站/百度指数查询移动版