Detailed explanation of how to use the vue-seamless-scroll seamless scroll component + solving the carousel blank gap problem (at the end)

Download and install

1.npm

npm install vue-seamless-scroll --save

2.yarn

yarn add vue-seamless-scroll

use

1. Global registration

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

2. Partial registration

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

3. Simple to use

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

4. Configuration items

key	description	default	val
step	The larger the value, the faster the scrolling speed.	1	Number
limitMoveNum	Enable seamless scrolling of data	5	Number
hoverStop	Whether to enable mouse hover control	true	Boolean
direction	Direction 0 Down 1 Up 2 Left 3 Right	1	Number
openTouch	Enable touch sliding on mobile terminal	true	Boolean
singleHeight	The height at which single-step motion stops (default value 0 is seamless non-stop scrolling) direction => 0/1	0	Number
singleWidth	The width of the single-step movement stop (the default value 0 is seamless non-stop scrolling) direction => 2/3	0	Number
waitTime	Single step stop waiting time (default value 1000ms)	1000	Number
switchOffset	The margin (px) between the left and right switch button and the left and right borders	30	Number
autoPlay	Before version 1.1.17, it needs to be set to false when manually switching.	true	Boolean
switchSingleStep	Manual single step switching step value (px)	134	Number
switchDelay	Animation time of single-step switching (ms)	400	Number
switchDisabledClass	The class name of the parent element of the switch button that cannot be clicked	disabled	String
isSingleRemUnit	Whether singleHeight and singleWidth enable rem measurement	false	Boolean
navigation	Whether to display controller buttons when scrolling in the left or right direction. When true, autoPlay automatically changes to false.	false	Boolean

5. Callback event

name	description	calback params
ScrollEnd	A callback event when a scroll is completed	null

6. Examples

 7. Overall code (be sure to give the maximum container height and hide it!)

 Let’s look at the example first:

<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: "Zhang San",
          time: "2021-08-09",
        },
        {
          title: "李思",
          time: "2021-08-09",
        },
        {
          title: "王五",
          time: "2021-08-09",
        },
        {
          title: "Zhao Liu",
          time: "2021-08-09",
        },
        {
          title: "Top Seven",
          time: "2021-08-09",
        },
        {
          title: "Sunba",
          time: "2021-08-09",
        },
      ],
    };
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.2, // The larger the value, the faster the scrolling speed
        limitMoveNum: 2, //The amount of data to start seamless scrolling this.dataList.length
        hoverStop: true, // Whether to enable mouse hover stop
        direction: 1, // 0 down 1 up 2 left 3 right
        openWatch: true, // Enable real-time data monitoring and refresh dom
        singleHeight: 0, // The height at which single-step movement stops (the default value 0 is seamless non-stop scrolling) direction => 0/1
        singleWidth: 0, // The width at which single-step motion stops (the default value 0 is seamless non-stop scrolling) direction => 2/3
        waitTime: 1000, // The time for single-step movement to stop (default value 1000ms)
      };
    },
  },
};
</script>

8. Solve the problem of blank scrolling:

When the second round is scrolled, a blank appears at the connection between the first and second rounds, and later the second round pops out of the blank. Instead of coming out from the bottom, the solution:

Method 1: Check the css style. There may be something wrong with the layout.

Mine is because I added display:flex to the child div.

Method 2: Try clearing the browser cache

Method 3: Copy the scrolling list again in vue-seamless-scroll

Method 4: *Clear margins

* {

  padding: 0;

  margin: 0;

}

 Thanks to the source of the article:

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

Detailed explanation of how to use vue-seamless-scroll seamless scrolling component - Lufan.com