vue-seamless-scroll 组件详解

vue-seamless-scroll 是一个基于 Vue.js 的无缝滚动组件，可以实现内容的平滑无缝滚动效果，特别适合展示合作伙伴、新闻资讯、产品列表等需要循环展示的内容。

基本用法

<template>
<div>
  <div v-for="(ele, index) in merchantList" :key="index" class="row-data-hz">
  <vueSeamlessScroll :data="ele" :class-option="{
    step: index==0?1:1.3, // 数值越大速度滚动越快
    limitMoveNum: ele.length, // 开始无缝滚动的数据量 this.dataList.length
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 2, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
    // copyNum: 1, // 确保克隆1份数据
    isSingleRemUnit:true
  }" class="incomeList-over qqqqqq">
    <div ref="mySwiper1" :class="'mySwiperInfos' + index" class="product-tabs">
      <div class="slide-track" ref="slideTrack">
        <div class="swiper-slide slide-item" v-for="(item, index) in ele" :key="index">
          <a-col class="item-count" :style="getColSpan(index)">
            <img :src="$getFileAccessHttpUrl(item.img)">
          </a-col>
        </div>
      </div>
    </div>

  </vueSeamlessScroll>
</div>

</div>
</template>

<script>
import { getPartner } from '@/api/index'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "home-index",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      merchantList: [],
    }
  },
  methods: {
    getColSpan() {
      return 'width:' + 100 / 6 + '%';      // 前6个span=4
    },
    splitArrayAlternating(arr) {
      const result = [];
      // 返回两组数据 每组占一半
      const halfLength = Math.ceil(arr.length / 2); // 计算一半的长度，向上取整
      let result1 = [...arr.slice(0, halfLength)];
      let result2 = [...arr.slice(halfLength)];
      result.push(result1); // 前一半
      result.push(result2); // 后一半
      return result;
    },
    init() {
      getPartner().then(res => {
        if (res.code === 200) {
          let arrs = res.result ? res.result : []
          console.log(this.splitArrayAlternating(arrs))
          this.merchantList = this.splitArrayAlternating(arrs)
        }
      })

    },
  },

  mounted() {
    this.init()
  }
}
</script>
<style lang="less" scoped>
.row-data-hz {
  width: 1348px;
  margin: 0 auto;
  overflow: hidden;

  .slide-track {
    display: inline-block;
  }

  .slide-item {
    min-width: 200px;
    margin-right: 20px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
  }

  .product-tabs {
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;;
    margin-top: 30px;

    .swiper-slide {
      width: 250px;
      background-color: #f5f8ff;
      border-radius: 8px;
      border: 1px solid #ddebff;
      margin-right: 30px;

      .item-count {
        width: 100% !important;
        padding: 20px !important;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
}
</style>

核心配置参数

1. 滚动方向 (direction)

• 0 : 向下滚动
• 1 : 向上滚动
• 2 : 向左滚动 (默认)
• 3 : 向右滚动

2. 滚动速度 (step)

数值越大滚动速度越快，建议设置为0.5-2之间的值

3. 无缝滚动配置 (limitMoveNum)

• 0 : 无限循环无缝滚动
• n : 当数据量超过n时才开始无缝滚动

4. 悬停控制 (hoverStop)

• true : 鼠标悬停时停止滚动
• false : 鼠标悬停时继续滚动

5. 数据监听 (openWatch)

• true : 开启数据变化监听
• false : 关闭数据变化监听

高级用法示例

<template>
  <div>
    <button @click="changeDirection">切换方向</button>
    <button @click="changeSpeed">改变速度</button>
    
    <vueSeamlessScroll 
      :data="listData" 
      :class-option="scrollOption"
      ref="seamlessScroll"
    >
      <ul class="item-wrapper">
        <li v-for="(item, index) in listData" :key="index" class="item">
          <img :src="item.img" :alt="item.title">
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </vueSeamlessScroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      listData: [], // 从API获取的数据
      scrollOption: {
        step: 0.8,
        limitMoveNum: 0,
        hoverStop: true,
        direction: 2,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
        copyNum: 1
      }
    }
  },
  methods: {
    changeDirection() {
      this.scrollOption.direction = this.scrollOption.direction === 2 ? 3 : 2;
      this.$refs.seamlessScroll.reset();
    },
    changeSpeed() {
      this.scrollOption.step = this.scrollOption.step === 0.8 ? 1.5 : 0.8;
    },
    async fetchData() {
      const res = await getPartner();
      if (res.code === 200) {
        this.listData = res.result || [];
      }
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

实际项目中的最佳实践

1. 数据分割处理 ：对于大量数据，可以分割成多个数组分别展示

splitArrayAlternating(arr) {
  const result = [];
  const halfLength = Math.ceil(arr.length / 2);
  let result1 = [...arr.slice(0, halfLength)];
  let result2 = [...arr.slice(halfLength)];
  result.push(result1, result2);
  return result;
}

常见问题解决

1. 滚动不流畅 ：

   • 检查 step 值是否合适
   • 减少DOM复杂度
   • 使用 transform 代替 left/top 定位

2. 两轮之间有间隔 ：

   • 设置 limitMoveNum: 0
   • 确保 copyNum: 1

3. 数据更新后不滚动 ：

   • 确保 openWatch: true
   • 必要时调用 reset() 方法
     vue-seamless-scroll 组件简单易用，通过合理配置可以实现各种无缝滚动效果，是展示型页面开发的利器。

效果

开发日常记录！