前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Vue_11】无缝滚动

【Vue_11】无缝滚动

作者头像
用户8250147
发布2021-02-04 14:50:01
1.5K0
发布2021-02-04 14:50:01
举报
文章被收录于专栏:黑马黑马

一、安装

1. npm
代码语言:javascript
复制
npm install vue-seamless-scroll --save
2. CDN
代码语言:javascript
复制
https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

二、使用

1. 注册组件
代码语言:javascript
复制
// 单个 .vue 注册
<script>
  import scroll from 'vue-seamless-scroll'
   export default {
      components: {
        scroll,
      }
   }
</script>
2. 使用
代码语言:javascript
复制
<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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、安装
    • 1. npm
      • 2. CDN
      • 二、使用
        • 1. 注册组件
          • 2. 使用
          • 三、属性
          相关产品与服务
          内容分发网络 CDN
          内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档