vue3.0实现循环滚动数据-vue-seamless-scroll的使用

1.安装vue-seamless-scroll

vue install vue-seamless-scroll --save

2.引用
切记：不同版本的vue引用方式不一样

main.js里面配置
vue3.0版本

import scroll from "vue-seamless-scroll/src";
import { createApp } from "vue";
const app = createApp(App);
app.use(scroll);

vue2.0版本

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

3.实例：

<template>
  <div>
    <div>
      <div>
        <div>
          <vue-seamless-scroll :data="listData"
                               :class-option="optionHover"
                               class="seamless-warp">
            <ul class="item">
            //这一句在我的vue版本是必须的，用来防止eslint的检测错误
              <!-- eslint-disable-next-line vue/require-v-for-key -->
              <li v-for="item in listData">
                <span class="title"
                      v-text="item.title"></span><span class="date"
                      v-text="item.date"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
    };
  },
  computed: {
    optionHover () {
      return {
        // openWatch: true;
        //  step: 0.2, // 数值越大速度滚动越快
        //   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停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>
<style lang="scss" scoped>
.seamless-warp {
  height: 229px;
  overflow: hidden;
}
</style>

4.效果图

5.vue插件地址

vue-seamless-warp