vue实现列表无缝循环滚动

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

　　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