npm安装地址 https://www.npmjs.com/package/vue-seamless-scroll

命令行执行:

npm install vue-seamless-scroll --save

然后在main.js文件里面引入使用:

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

在页面使用参考地址: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

里面有详细的参数及代码案例:直接复制到项目里面即可显示:

遇到的问题:

1. 复制案例的样式:会出现滚动内容不衔接的情况

.seamless-warp {
height: 229px;
overflow: hidden;
}

2. 然后在上面的css中添加行高就不会出现切断的现象了

vue的无缝滚动插件vue-seamless-scroll的安装与使用的更多相关文章

  1. vue的无缝滚动插件vue-seamless-scroll的使用

    https://chenxuan0000.github.io/component-document/index_prod.html#/component/seamless-others 在vue环境下 ...

  2. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  3. vue实现无缝滚动

    vue实现无缝滚动 标签部分 <div style="height: 260px; width: 50%;display: inline-block;float: right; ove ...

  4. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  6. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  7. vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结

    最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...

  8. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  9. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

随机推荐

  1. at java.net.InetAddress.getLocalHost(InetAddress.java:1475)

    今天在centos 安装hadoop安装完成后执行wordcount的时候报如下错误: at java.net.InetAddress.getLocalHost(InetAddress.java:14 ...

  2. Caused by: java.lang.NoClassDefFoundError at com.jc.zm.ZmAlarmAction.analyDo(ZmAlarmAction.java:198)

    ZmPlanDayAction objPlanDay = new ZmPlanDayAction();   objPlanDay.setDao(dao);   objPlanDay.setServle ...

  3. jquery datables ajax分页后的点击事件无效是怎么回事

    异步请求数据后,动态向table中追加行,行点击事件失效 动态加入到DOM中的对象无法继承原有的事件,所以无效,举例: // $.ajax... ajax部分省略 var tr = "&qu ...

  4. 2018.10.23 NOIP训练 Leo的组合数问题(组合数学+莫队)

    传送门 好题. 考察了莫队和组合数学两个知识板块. 首先需要推出单次已知n,mn,mn,m的答案的式子. 我们令f[i]f[i]f[i]表示当前最大值为第iii个数的方案数. 显然iii之后的数都是单 ...

  5. 2018.09.26 bzoj4326: NOIP2015 运输计划(二分+树上差分)

    传送门 简单树上操作. 先转边权为点权. 显然所有的询问操作对应的路径会有一些交点,那么我们可以直接二分答案,对于所有大于二分值的询问用树上差分维护,最后dfs一遍每个点被覆盖了几次,当前情况合法当且 ...

  6. 23. Man and His Natural Habitat 人类及其自然栖息地

    . Man and His Natural Habitat 人类及其自然栖息地 ① Ecology is that branch of science which concerns itself wi ...

  7. HDU 5618 Jam's problem again (cdq分治+BIT 或 树状数组套Treap)

    题意:给n个点,求每一个点的满足 x y z 都小于等于它的其他点的个数. 析:三维的,第一维直接排序就好按下标来,第二维按值来,第三维用数状数组维即可. 代码如下: cdq 分治: #pragma ...

  8. Redis - 事务(multi,exec,watch,unwatch)

    转载自:https://blog.csdn.net/wgh1015398431/article/details/53156027:加了一些自己的注解 1.事务 1.1 概述 Redis中的事务(tra ...

  9. Android+PHP开发最佳实践

    本书以一个完整的微博应用项目实例为主线,由浅入深地讲解了Android客户端开发和PHP服务端开发的思路和技巧.从前期的产品设计.架构设计,到客户端和服务器的编码实现,再到性能测试和系统优化,以及最后 ...

  10. day06(Collection,List,ArrayList,LinkedList,iterator迭代器,增强for)

    Collection   接口    方法实现 boolean  add(Object o);//添加 boolean  remove(Object o);//移除 修改方法   让实现类自己去实现修 ...