vue-seamless-scroll插件实现无缝滚动

最新推荐文章于 2025-10-24 12:40:22 发布

原创最新推荐文章于 2025-10-24 12:40:22 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

文章标签：

vue-seamless-scroll 是一个基于 Vue.js 的无缝滚动插件，通常用于在网页或应用中实现内容的自动滚动效果，类似于新闻公告、图片轮播等。它支持横向和纵向的滚动，并且可以自定义滚动速度、方向等参数，适合展示一些需要持续循环展示的信息。

安装

首先，你需要安装 vue-seamless-scroll：

npm install vue-seamless-scroll

在项目中引入

在 Vue 项目中，你可以全局或者局部引入 vue-seamless-scroll。

全局引入：

在 main.js 中全局注册：

import Vue from 'vue'
import VueSeamlessScroll from 'vue-seamless-scroll'

Vue.use(VueSeamlessScroll)

局部引入：

在具体的组件中引入：

import { SeamlessScroll } from 'vue-seamless-scroll'

export default {
  components: {
    SeamlessScroll
  }
}

基本用法

接下来，在你的 Vue 组件中引入并使用 vue-seamless-scroll。

<template>
  <div>
    <seamless-scroll :data="dataList" :class-option="scrollClass">
      <ul>
        <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
      </ul>
    </seamless-scroll>
  </div>
</template>

<script>
import SeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    SeamlessScroll,
  },
  data() {
    return {
      dataList: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      scrollClass: {
        'scroll-item': true,
      },
    };
  },
};
</script>

<style>
.scroll-item {
  display: inline-block; /* 使每个项横向排列 */
  width: 200px; /* 每个项的宽度 */
  text-align: center; /* 使文本居中 */
}
</style>

属性配置

vue-seamless-scroll 组件支持以下属性：

data: (Array) 要滚动的数据列表。
class-option: (Object) 自定义滚动项的 CSS 类。
speed: (Number) 滚动速度，单位是毫秒，默认为 50。
direction: (String) 滚动方向，可以是 left 或 right，默认为 left。
loop: (Boolean) 是否循环滚动，默认为 true。
height: (String) 滚动容器的高度，默认为 auto。

示例代码

以下是一个更完整的示例，展示如何使用 vue-seamless-scroll 进行配置：

<template>
  <div>
    <h2>无缝横向滚动示例</h2>
    <seamless-scroll
      :data="dataList"
      :class-option="scrollClass"
      :speed="30"           <!-- 滚动速度 -->
      :direction="'left'"   <!-- 滚动方向 -->
      :loop="true"          <!-- 是否循环 -->
      :height="'50px'"      <!-- 设置滚动区域的高度 -->
    >
      <ul>
        <li v-for="(item, index) in dataList" :key="index" class="scroll-item">
          {{ item }}
        </li>
      </ul>
    </seamless-scroll>
  </div>
</template>

<script>
import SeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    SeamlessScroll,
  },
  data() {
    return {
      dataList: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5',
        'Item 6',
        'Item 7',
      ],
      scrollClass: {
        'scroll-item': true,
      },
    };
  },
};
</script>

<style>
.scroll-item {
  display: inline-block; /* 使每个项横向排列 */
  width: 200px; /* 每个项的宽度 */
  text-align: center; /* 使文本居中 */
  line-height: 50px; /* 行高与高度一致 */
}
</style>

常用配置选项

vue-seamless-scroll 提供了丰富的配置选项，以下是常用的配置选项：

属性	说明	默认值
`data`	需要滚动的数据	`[]`
`classOption`	滚动的配置选项	`{}`
`step`	每次滚动的步长（以像素为单位）	`1`
`limitMoveNum`	每次滚动触发时最多移动多少个元素（适用于容器内元素大小不一的场景）	`5`
`hoverStop`	鼠标悬停时是否停止滚动	`true`
`direction`	滚动方向（0：向上，1：向下，2：向左，3：向右）	`0`
`singleHeight`	每个滚动项的高度（适用于内容高度固定的场景）	`0`
`singleWidth`	每个滚动项的宽度（适用于内容宽度固定的场景，适合横向滚动）	`0`
`waitTime`	每次滚动后停留的时间（以毫秒为单位）	`1000`

示例

垂直滚动

<seamless-scroll :data="dataList" :class-option="{ direction: 0, step: 2 }">
  <ul>
    <li v-for="item in dataList" :key="item">{{ item }}</li>
  </ul>
</seamless-scroll>

横向滚动

<seamless-scroll :data="dataList" :class-option="{ direction: 2, step: 2 }">
  <ul style="display: flex;">
    <li v-for="item in dataList" :key="item">{{ item }}</li>
  </ul>
</seamless-scroll>

踩坑

在项目遇到横向滚动本来只滚动了1行，偶然会出现两行滚动。刷新又回复正常。

横向滚动出现两行的情况可能是由于以下几个原因导致的：

1. 容器宽度不足

如果滚动容器的宽度不足以容纳所有滚动项，可能会导致某些项换行。确保容器的宽度足够大，以容纳所有的滚动项。

2. 滚动项的宽度设置不当

确保每个滚动项的宽度是固定的或者能够适应容器的宽度。如果滚动项的宽度设置不一致，可能会导致不必要的换行。可以尝试给每个滚动项设置相同的宽度。

3. CSS 样式问题

检查 CSS 样式是否影响了滚动项的布局。例如，确保没有设置 display: inline 或者其他影响布局的样式。可以尝试使用 display: flex; 来处理横向排列。

4. `overflow` 属性未正确设置

确保容器的 overflow 属性设置为 hidden 或 auto，以防止内容换行。通常情况下，横向滚动的容器应该是这样的：

.scroll-wrapper {
  width: 100%; /* 或者设置为具体宽度 */
  overflow: hidden;
  white-space: nowrap; /* 防止换行 */
}

5. `pathRewrite` 配置问题

在 vue-seamless-scroll 中，确保在滚动的配置选项中，项的容器是不会影响到滚动的。使用正确的 pathRewrite 配置。

6. JavaScript 计算问题

在一些情况下，如果滚动的计算是异步的，可能会导致容器宽度或滚动项宽度未能及时更新。这种情况可以在组件加载完成后，确保所有项的宽度正确计算。

解决方案

尝试以下方法来解决这个问题：

确保每个项宽度一致，可以设置 CSS：

.scroll-item {
  width: 200px; /* 设置为相同的固定宽度 */
  display: inline-block; /* 确保它们横向排列 */
}

使用 Flexbox 布局：

.scroll-wrapper {
  display: flex; /* 使用 Flexbox 布局 */
  overflow: hidden;
  white-space: nowrap; /* 防止换行 */
}

设置固定高度

.scroll-wrapper {
   height: 36px;
  overflow: hidden;
}

我就使用了固定的高度，就解决了这个问题。

参考