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

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