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

最新推荐文章于 2024-07-09 09:58:49 发布

Nicole.oO

最新推荐文章于 2024-07-09 09:58:49 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript html5 react jquery

本文链接：https://blog.csdn.net/webqingyou/article/details/120665830

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用vue-seamless-scroll组件创建无缝滚动效果，包括安装、引入、配置选项以及示例代码。在实际应用中遇到图片抖动的问题，可能是因为滚动速度设置、数据监控或DOM更新导致，解决方案可能涉及调整组件参数或优化数据处理。

摘要由CSDN通过智能技术生成

效果图 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;