一、vue-seamless-scroll是什么？

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

二、使用步骤

1.引入库

//npm
npm install vue-seamless-scroll --save

2.引入组件

//全局注册
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

//按需引入
import VueSeamless"vue-seamless-scroll";

export default {
  components: {
    VueSeamless,
  },
}

3.渲染页面

<div id="apps" style="height: 300px; overflow: hidden">
    <VueSeamless
      :data="cityData"
      :class-option="cityOption"
    >
      <div
        class="scorll-content"
        v-for="(item) in cityData"
        :key="item.value"
      >
        <div>{{ item.name }}---Top{{item.value}}</div>
      </div>
    </VueSeamless>
  </div>

<script>
import VueSeamless from "vue-seamless-scroll";

export default {
  components: {
    VueSeamless,
  },
  data() {
    return {
      cityData: [
        { name: "北京市", value: "1" },
        { name: "上海市", value: "2" },
        { name: "曹县", value: "3" },
        { name: "深圳市", value: "4" },
        { name: "广州市", value: "5" },
        { name: "南京市", value: "6" },
        { name: "成都市", value: "7" },
        { name: "郑州市", value: "8" },
        { name: "天津市", value: "9" },
        { name: "香港", value: "10" },
        { name: "武汉市", value: "11" },
        { name: "西安市", value: "12" },
      ],
    };
  },
  computed: {
    // 公告滚动自定义
    cityOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.cityData.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>

完