Vue.js无缝滚动组件vue-seamless-scroll详解-优快云博客

vue-seamless-scroll是一个基于Vue.js的无缝滚动组件，使用requestAnimationFrame实现流畅滚动效果。它支持上下左右滚动，单步滚动，以及手动切换方向。组件可配置包括滚动速度、数据实时监控、鼠标悬停暂停等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-seamless-scroll介绍

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

安装

***Npm ***

npm install vue-seamless-scroll --save

引入组件

import vueSeamlessScroll from 'vue-seamless-scroll'
 components: {

    vueSeamlessScroll
  },

配置参数

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 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)
                }
            }
 
        },

<vue-seamless-scroll v-if="tempArray.length>=1" :data="tempArray" class="seamless-warp" :class-option="defaultOption"  >
            <ul class="ul-scoll">
                <li v-for="(item, index) in tempArray" :key='index'>
                  <div class="item" >
                   <div :class="((item.Isnormal=='断联')||(item.Isnormal=='异常'))?'top top-1':'top top-2'"><span>{{index+1}}</span> </div>
                    <div class="pro-name"  :data-id="index" :data-index="item.C_Code" :data-model="item">{{item.C_Code}}</div>
                    <div class="pro-name">{{item.C_TaskNum}}</div>
                    <div class="num">{{item.C_Location}}</div>
                    <div class="num">{{item.Isnormal}}</div>
                    <div class="num">{{item.C_Status}}</div>
                    <div class="num">{{item.C_IsLock}}</div>
                    <div class="num">{{item.C_Electricity}}</div>
                  </div>
                </li>
            </ul>
        </vue-seamless-scroll>