vue-seamless-scroll无缝滚动组件使用方法详解+解决轮播空白缝隙问题（最后面）

下载安装

1.npm

npm install vue-seamless-scroll --save

2.yarn

yarn add vue-seamless-scroll

使用

1、全局注册

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})

2、局部注册

import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }

3、简单使用

<div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
</div>

4、配置项

5、回调事件

6、实例

 7、整体代码（一定要给最容器高度，以及隐藏！）

 先看实例：

<template>   <div>       <vue-seamless-scroll         :data="listData"         :class-option="seamlessScrollOption"         style="           border: 1px solid white;           height: 200px;           overflow: hidden;           width: 200px;           color: white;           font-size: 18px;           text-align: center;         "       >         <ul>           <li             v-for="(item, index) in listData"             :key="index"             style="padding: 10px; margin: 5px"           >             <span class="title">{{ item.title }}：</span             ><span class="date">{{ item.time }}</span>           </li>         </ul>       </vue-seamless-scroll>   </div> </template>   <script>   export default {   props: {},   data() {     return {       listData: [         {           title: "张三",           time: "2021-08-09",         },         {           title: "李四",           time: "2021-08-09",         },         {           title: "王五",           time: "2021-08-09",         },         {           title: "赵六",           time: "2021-08-09",         },         {           title: "前七",           time: "2021-08-09",         },         {           title: "孙八",           time: "2021-08-09",         },       ],     };   },   computed: {     seamlessScrollOption() {       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)       };     },   }, }; </script>

8、解决滚动出现空白问题：

当滚动第二轮时，在第一轮和第二轮的衔接处出现了空白，稍后第二轮从空白处跳出显示。而不是从底部出来，解决办法：

方法一：检查一下css样式，可能是布局出了问题，

我的是因为在子div中加了display:flex

方法二：清空下浏览器缓存试试

方法三：在vue-seamless-scroll中再复制一次滚动列表

方法四：*清除边距

* {

  padding: 0;

  margin: 0;

}

 在此感谢文章出处：

https://www.cnblogs.com/Plume-blogs/p/15562814.html

vue-seamless-scroll无缝滚动组件使用方法详解 - 路饭网