列表无缝循环滚动

安装插件：

npm install vue-seamless-scroll --save

在 main.js 中引入：

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

页面使用：

<template>
    <div class="roll-list">
        <div class="roll-list-text">{
   
   { titleText }}</div>
            <ul class="ul-scoll">
                <li class="header-li">
                    <div v-for="(item,index) in headerLi" :key="index">{
   
   { item }}</div>
                </li>
                <vue-seamless-scroll :data="tableList" :class-option="defaultOption" class="ul-scoll-list">
                    <div class="list-row">
                        <li v-for="(item,index) in tableList" :key="index" >
                            <div :class="[index === 0 ? 'active-red' : '',index === 1 ? 'active-yellow' : '',index === 2 ? 'active-green' : '']">{
   
   {index+1}}</div>
                            <div>{
   
   {item.name}}</div>
                            <div>{
   
   {item.date}}</div>
                        </li>
                    </div>
                </vue-seamless-scroll>
            </ul>
    </div>
</template>

<style lang="scss" scoped>
// 滚动列表样式
.roll-list{
    .roll-list-text{
        font-size: 1.4vh;
        font-weight: bold;
    }
    .ul-scoll{
        list-style: none;
        padding: 0;
        margin: 10px 0 0 0;
        .header-li{
            font-weight: bold;
        }
        .ul-scoll-list{
            height: 65px;
            overflow: hidden;
            .list-row{
                .active-red{
                    color: #FF3A30;
                }
                .active-yellow{
                    color: #FF9502;
                }
                .active-green{
                    color: #00BB7A;
                }
                li:nth-child(even){
                    background-color: #eee;
                }
            }
        }
        .header-li, .list-row>li{
            display: flex;
            flex-direction: row;
            font-size: 1.5vh;
            padding: 2px 0;
            text-align: center;
            div:nth-child(1){
                width: 60px;
            }
            div:nth-child(2){
                width: 100px;
            }
            div:nth-child(3){
                width: 19vw;
            }
        }
    }
}
</style>

配置：

<script>
export default {
    data() {
        return {
            titleText: '测试标题', // 滚动列表的标题
            headerLi: ['字段1','字段2','字段3'], // 滚动列表的表头
            tableList: [
                {name: '阿迪是',date: '啊啊啊啊啊啊啊啊'},
                {name: '阿迪是',date: '少时诵诗书'},
                {name: '阿迪是',date: '的点点滴滴'},
                {name: '阿迪是',date: '灌灌灌灌灌'},
                {name: '阿迪是',date: '哈哈哈哈'},
                {name: '阿迪是',date: '急急急急急急'},
            ], // 滚动列表的内容
            defaultOption: {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    // 如果是以组件方式使用，请注释data里边的字段，并配置 props 以下字段
    /*props: {
        titleText: {
            type: String,
            default: ''
        },
        headerLi: {
            type: Array,
            default: () => {
                return []
            }
        },
        tableList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },*/

    created() {
        
    },
    methods: {
        
    },
}
</script>

至此完成！！！

测试有效！！！感谢支持！！！