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

65 阅读 0 评论 43 点赞

我是靠谱客的博主有魅力汽车，最近开发中收集的这篇文章主要介绍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
}

//使用
<vue-seamless-scroll></vue-seamless-scroll>

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. 示例

页面部分

<vue-seamless-scroll
    ref="scroll"
    :data="logos"
    :class-option="defaultOption"
    style="width:1110px;height:300px;overflow:hidden; margin:0 auto;"
  >
    <ul class="ul-scoll">
      <li
        v-for="(item, index) in Math.ceil(logos.length / 5)"
        :key="index"
      >
        <img
          v-for="(item, i) in logos.slice(5 * index, 5 * (index + 1))"
          :key="i"
          :src="getImg(item)"
          
        />
      </li>
    </ul>
  </vue-seamless-scroll>

代码段

<script>

    import logos from './logos'
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
    components:{
      vueSeamlessScroll
    },
    data () {
      return {
        logos:logos,
      }
    },
    computed:{
      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)
        };
      },
    },
    methods: {
      getImg(item) {
          return require(`../assets/index/logos${item.split('logos')[1]}`);
        },
    }
  }
</script>

图片导入方法 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;