专栏首页黑马【Vue_11】无缝滚动

【Vue_11】无缝滚动

一、安装

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js动画之无缝滚动

    skylark
  • js 原生无缝滚动

    kirin
  • 图片无缝上下滚动

    今天要用到图片无缝滚动,在网上找了半天要么不能滚动,要么不能无缝。我最后找到了一个可以达到要求的代码,现在贴出来放便大家使用。我测试过的,可以使用。 <div ...

    苦咖啡
  • liMarquee – jQuery无缝滚动插件

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大。它可以应用于任何 Web...

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

    Demo_Null
  • jquery无缝隙连续滚动代码

    通常我们在做网页布局的时候,客户为要求在某个地方实现图片滚动或文字滚动的展示,这就是所谓的跑马灯效果,在以前蓝叶用html标签marquee来做跑马灯效果,ma...

    李维亮
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • 无缝循环滚动图片的JS代码

    无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试。

    小小鱼儿小小林
  • vue-seamless-scroll 实现页面的无缝滚动

    用户4344670
  • 基于vue3实现的vue3-seamless-scroll无缝滚动

    用户6682160
  • 第41天:匀速、缓动运动和图片无缝滚动

    缓动运动 公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越...

    半指温柔乐
  • 纯css实现单张图片无限循环无缝滚动

    参考链接:https://blog.csdn.net/qq_20777797/article/details/77916029

    蓓蕾心晴
  • jQuery无缝图片横向(水平)/竖向(垂直)滚动

    jQuery的一个不错的小插件,记性越来越差了,整理一下贴在这里,方便以后Copy & Paste <!DOCTYPE html PUBLIC "-//W3C/...

    菩提树下的杨过
  • js实现单张或多张图片持续无缝滚动

    想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重...

    蓓蕾心晴
  • iOS开发之多图片无缝滚动组件封装与使用

      经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播。没看...

    lizelu
  • CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

    在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

    守候i
  • 56.Qt-滚动字幕之无间隙滚动

    最近要实现一个滚动条字幕,但是搜到的系列文章都是利用定时器QTimer,在固定的时间截取文本并显示,这样滚动的时候其实是断断续续的,因为实际上是一个个字符位移实...

    张诺谦
  • 背景无限滚动

    这是游戏里面很常用的一个功能模块,它就像你的生活,有着走不完的路程。它的实现也很简单,要么做一个很长的背景图,然后移动相机;要么就是实现一个跑马灯,像那些轮播图...

    异名
  • 摸鱼的新发现,滚动条无限滚动

    上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所...

    小丑同学

扫码关注云+社区

领取腾讯云代金券