vue实现列表无缝循环滚动

3403771864 发布于2022-09-14 22:32 / 996人阅读

　　vue如何为大家展示列表无缝循环滚动，以下就是具体代码内容如下：

　　功能介绍：

　　在PC端、大数据、官网、后台管理平台开发项目中，时常会要求展示这种列表循环滚动。

　　大致需求：

　　1、列表内容可以循环展示；

　　2、每条内容展示时间间距几秒；

　　3、可以形成走马灯样式效果；

　　整体思路：

　　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>

超融合服务器服务器托管无缝滚动水平无缝滚动文字无缝滚动无缝循环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127719.html

vue实现消息的无缝滚动效果（完善版）

...e-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法第一步在模板中使用v-for方法循环出消息列表样式设置 *{ margin: 0 ; padding: 0; } #box{ width: 300px; height: 32px; overflow: hidden; padding-left: 30px; bord...

luckyyulin 2019-08-21 17:54 评论0 收藏0
js实现列表自动滚动循环播放

...爽，下面看看具体代码：　　1.实现效果图　　鼠标移入，暂停滚动；鼠标移出，继续滚动；<img src="https://img.jbzj.com/file_images/arti...

3403771864 2022-09-12 19:55 评论0 收藏0
vue无缝滚动的插件开发填坑分享

...vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来说太重了，于是自己造了个轮子。 3.在这分享下，当时写这个插件的坑,自己也复习下，如果代码上有瑕疵欢迎指出。源码参考 vue-seamless-scroll 1.简单的实...

岳光 2019-08-22 14:04 评论0 收藏0
jquery特效：无缝向上循环滚动列表

...em1 item2item2item2 item2item2item2 实现思路：获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下： var doscroll = function(){ var $parent = $(".js-slide-list"); va...

hot_pot_Leo 2019-08-21 10:19 评论0 收藏0
vue-music（1）音乐播发器项目开发记录

...babel-polyfill 对es6的高级语法进行转义当运行环境中并没有实现的一些方法，babel-polyfill 会给其做兼容需要在main.js中引入 npm install babel-runtime --save 辅助编译不需要引入即可用 babel-runtime 是供编译模块复用工具函数。是锦上添花bab...

happen 2019-08-23 11:29 评论0 收藏0