vue实现列表无缝循环滚动
更新时间：2022年07月14日 09:22:34 作者：iatkotworld
这篇文章主要为大家详细介绍了vue实现列表无缝循环滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现列表无缝循环滚动的具体代码，供大家参考，具体内容如下
功能介绍：
在PC端网页，包括大数据、官网、后台管理平台开发中，可能会用到这种列表循环滚动的展示。
大致需求：
1、列表可以使用数组循环遍历；
2、每隔几秒中列表数据向上滚动一定距离，展示下一条数据；
3、滚动到最后一条数据时重新显示第一条开始的数据（类似走马灯、banner图的循环效果）；
整体思路：
1、使用两个定时器嵌套实现；
2、需要两个相同容器存放同样内容，实现无缝衔接效果；
效果展示：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<style>
/* 滚动表格最外层 */
.tableoOut {
margin: 100px auto;
width: 500px;
height: 400px;
background: pink;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.tableBox {
width: 100%;
background: #000;
overflow: hidden
}
.tableTit {
background: #000;
width: 100%;
height: 40px;
color: #858A84;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.tableInner {
height: auto;
}
.box {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.box .time {
color: #858A84;
}
.tableoOut .addr, .tableoOut .time, .tableoOut .name {
box-sizing: border-box;
padding: 0 5px;text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tableoOut .addr {
width: calc(100% - 200px);
flex-shrink: 0;
}
.tableoOut .name, .tableoOut .time {
width: 100px;
flex-shrink: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="tableoOut" ref="tableoOut">
<div class="tableTit">
<div class="name">姓名</div>
<div class="addr">地址</div>
<div class="time">入驻时间</div>
</div>
<div class="tableBox" ref="tableBox"
:style="{height: tableHei}">
<div class="tableInner" ref="tableInner">
<div class="box" v-for="item in 7" :key="item">
<div class="name">{{item}}</div>
<div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
山东省山东省山东省山东省山东省</div>
<div class="time">2022-05-26</div>
</div>
</div>
<div class="tableInner" v-if="size < 7">
<div class="box" v-for="item in 7" :key="item">
<div class="name">{{item}}</div>
<div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
山东省山东省山东省山东省山东省</div>
<div class="time">2022-05-26</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
tableHei: 'auto',
timer: null,
size: 0
},
mounted() {
this.getTable();
},
methods: {
getTable() {
const outHei = this.$refs.tableoOut.clientHeight - 60;
this.size = Math.floor(outHei / 50);
this.tableHei = this.size * 50 + 'px';
this.scrolls();
},
stepScroll() {
const step = 50;
let num = 0;
const tableBox = this.$refs.tableBox;
const stepTime = setInterval(function () {
num += 2;
if (num > step) {
num = 0;
clearInterval(stepTime);
} else {
tableBox.scrollTop += 2;
}
}, 20);
},
scrolls() {
const that = this;
const tableBox = this.$refs.tableBox;
const tableInner = this.$refs.tableInner;
clearInterval(this.timer);
this.timer = setInterval(function () {
if(tableBox.scrollTop === tableInner.scrollHeight) {
tableBox.scrollTop = 0;
}
that.stepScroll();
}, 2000);
},
}
})
</script>
</html>setInterval踩坑：
发现这种方法实现的定时轮播，有一阵没访问页面，会出现卡停的情况，采用下面的解决方法：
<script>
new Vue({
el: '#app',
data: {
tableHei: 'auto',
timer: null,
size: 0,
stopSign: true, // 判断定时器是否停止标识
stepTime: null, // 改为全局定时器
},
mounted() {
const that = this;
// 增加浏览器激活状态判断。非激活状态为onblur
window.onfocus = function(e) {
const tableBox = that.$refs.tableBox;
const sT = tableBox.scrollTop;
console.log("激活状态！")
if (!that.stopSign) {
tableBox.scrollTop = Math.round(sT / 50) * 50;
clearInterval(that.stepTime);
}
}
this.getTable();
},
methods: {
getTable() {
const outHei = this.$refs.tableoOut.clientHeight - 60;
this.size = Math.floor(outHei / 50);
this.tableHei = this.size * 50 + 'px';
this.scrolls();
},
stepScroll() {
const that = this;
const step = 50;
let num = 0;
const tableBox = this.$refs.tableBox;
// 改为全局定时器，且在调用前先进行清空
clearInterval(this.stepTime);
this.stepTime = setInterval(function () {
that.stopSign = false;
num += 2;
if (num > step) {
num = 0;
clearInterval(that.stepTime);
that.stopSign = true;
} else {
tableBox.scrollTop += 2;
}
}, 1000 / 60);
},
scrolls() {
const that = this;
const tableBox = this.$refs.tableBox;
const tableInner = this.$refs.tableInner;
clearInterval(this.timer);
this.timer = setInterval(function () {
// 修改定时器结束判断条件
if(tableBox.scrollTop >= tableInner.scrollHeight) {
tableBox.scrollTop = 0;
}
that.stepScroll();
}, 2000);
},
}
})
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在IDEA中安装vue插件全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
下面小编就为大家分享一篇解决Vue不能检测数组或对象变动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了如何设置和运行一个基于uni-app框架的项目,包括安装必要的软件、克隆项目并安装依赖,以及如何使用HBuilderX进行项目运行和调试,需要的朋友可以参考下2025-01-01
在 Vue 中,v-model 是一个常用的指令,用于实现表单元素和组件之间的双向绑定,当我们使用原生的表单元素时,直接使用 v-model 是很方便的,本文给大家介绍了Vue自定义组件实现 v-model 的几种方式,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue中的虚拟DOM、diff算法、key的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要给大家介绍了关于vue3+element Plus实现表格前端分页的相关资料,虽然很多时候后端会把分页,搜索,排序都做好,但是有些返回数据并不多的页面,或者其他原因不能后端分页的通常会前端处理,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue浏览器链接与接口参数实现加密过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要介绍了vue-admin-element项目突然就起不来了的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue+element控件之间间距太大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue elementui上传图片限制格式、大小和尺寸方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论