vue实现列表无缝循环滚动

2024-10-20 12:42:03

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue实现循环滚动列表

本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic
解决vue的 v-for 循环中图片加载路径问题

先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数
基于vue实现循环滚动列表功能

注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 先来介绍该组件的用法: 1.安装命令: cnpm install vue-seamless-scroll --save 2.main.js文件中作为全局组件引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) <vue-seamless-scroll :data="listD
vue实现循环滚动图片

本文实例为大家分享了vue实现循环滚动图片的具体代码,供大家参考,具体内容如下效果(循环滚动,可切换方向): 轮播组件BaseSwiper.vue: <template> <div class="swiperBox"> <img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt=&
vue2.0 循环遍历加载不同图片的方法

demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div> 引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor
使用vue v-for循环图片路径方式

目录 v-for循环图片路径 v-for循环图片无法显示解决方法 v-for循环图片路径 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="(item, index) in img" :key="index"> <!-- <
vue实现图片滚动的示例代码(类似走马灯效果)

上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde
vue实现公告消息横向无缝循环滚动

本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码,供大家参考,具体内容如下该组件实现了公告消息的无缝横向滚动.我命名为marqueex.vue文件,感谢原来博主的分享,我自己做个总结 marqueex.vue <template> <div class="my-outbox"> <div class="my-inbox" ref='box'> <div class="my-list&q
Vue实现一种简单的无限循环滚动动画的示例

本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i
在vue中v-for循环遍历图片不显示错误的解决方案

目录 v-for循环遍历图片不显示错误错误 vue本地图片路径正确,但for循环不显示经过改正加个require()就可以显示了 v-for循环遍历图片不显示错误 <template> <div class="demo" :style="{width:innerWidth} + 'px' "> <div class="carousel-inner"> <div v-for="(img,i)