【Vue_11】无缝滚动

原创
04/06 21:05
阅读数 176

参考文档

一、安装

1. npm

npm install vue-seamless-scroll --save

2. CDN

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

二、使用

1. 注册组件

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

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>

三、属性

名称 说明 默认值 类型
step 数值越大速度滚动越快 1 Number
direction 0: 向下、1: 向上、2: 向左、3: 向右 1 Number
hoverStop 是否启用鼠标hover控制 true Boolean
waitTime 单步停止等待时间 ms 1000 Number
展开阅读全文
打赏
1
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部