VUE 无缝滚动组件 VUE-SEAMLESS-SCROLL

最新推荐文章于 2024-08-05 08:00:00 发布

ChinaLzw

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量221

点赞数

分类专栏： Vue.js vue 文章标签： vue 无缝滚动

原文链接：https://blog.csdn.net/Demo_Null/article/details/107586276

版权

Vue.js 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用vue-seamless-scroll组件。首先通过npm或CDN方式安装，然后在组件中注册并使用。示例展示了在模板中引入滚动列表，并配置direction选项实现无缝滚动效果。

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

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 属性
只列举了常用的属性，更多用法见作者给出的参考文档
在这里插入图片描述