vue 无缝滚动组件 vue-seamless-scroll

最新推荐文章于 2025-05-20 10:21:08 发布

Demo_Null

最新推荐文章于 2025-05-20 10:21:08 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： VueJS 文章标签： vue java vue.js node.js es6

本文链接：https://blog.youkuaiyun.com/Demo_Null/article/details/107586276

VueJS 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍如何使用Vue-seamless-scroll插件实现平滑滚动效果。从安装配置到组件注册，再到具体属性设置，帮助开发者快速掌握并应用到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

1.1 安装

1.1.1 npm

npm install vue-seamless-scroll --save

1.1.2 CDN

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

1.2 使用

1.2.1 注册组件

// 单个 .vue 注册
<script>
  import scroll from 'vue-seamless-scroll'
   export default {
      components: {
        scroll,
      }
   }
</script>

1.2.2 使用

<template>
    <div>
        <scroll class="seamless-warp" :data="data" :class-option="classOption">
              <ul>
                <li>
                    <span>第一行</span>
                    <span>第二行</span>
                    <span>第三行</span>
                    <span>第四行</span>
                </li>
              </ul>
        </scroll>
    </div>
</template>

<script>
    import scroll from 'vue-seamless-scroll'
    export default {
        components: {
            scroll,
        },
        data () {
            return {
    
            }
        },
        computed: {
            classOption () {
                return {
                    direction: 1
                }
             }
        }
    }
</script>

1.3 属性

只列举了常用的属性，更多用法见作者给出的参考文档

名称	说明	默认值	类型
step	数值越大速度滚动越快	1	Number
direction	0: 向下、1: 向上、2: 向左、3: 向右	1	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
waitTime	单步停止等待时间 ms	1000	Number