vue 走马灯无缝滚动轮播图 vue-seamless-scroll

效果图 GIF软件有点问题出现抖动 （献丑了QAQ）

1. 安装 vue-seamless-scroll

npm install vue-seamless-scroll --save
//或
yarn add vue-seamless-scroll

2. 引入组件 

import vueSeamlessScroll from 'vue-seamless-scroll'

3 引用

// 注册
components: {
        vueSeamlessScroll
}

//使用

4. API

defaultOption() {
      return {
        step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: Math.ceil(this.logos.length / 5), // 开始无缝滚动的数据量 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)
      };
    },

5. 示例

页面部分

代码段

图片导入方法 logos.js

let requireModule = require.context(
  '../assets/index/logos',
  false,
  /\.png$/,
);
// console.log('len:', requireModule.keys().length, requireModule.keys());
let logos = [];
for (let i = 0; i < requireModule.keys().length; i++) {
  logos.push(
    `../assets/index/logos/${requireModule.keys()[i].split('./')[1]}`,
  );
}

export default logos;