简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

vue的无缝滚动组件详解

小云云
发布： 2017-12-18 16:18:34
原创
2680 人浏览过
本文和大家分享vue的无缝滚动组件详解，在awesome上一直没有发现vue的无缝滚动组件，在工作之余写了个组件，分享出来希望大家一起学习进步。

Installation

NPM

npm install vue-seamless-scroll --save
登录后复制

Usage

ES6

以下es6用法需要webpack环境编译.

具体参考example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
  components: {
    vueSeamlessScroll
  }
})
登录后复制

普通模式 (script tag)

Example:

具体参考test/test.html
<html>
<head>
  ...
</head>
<body>
  <p id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </p>
  <script src="vue.js"></script>
  <script src="vue-seamless-scroll"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>
登录后复制

Configure

      defaultOption () {
        return {
          step: 1, //步长 越大滚动速度越快
          limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
          hoverStop: true, //是否启用鼠标hover控制
          direction: 1, //1 往上 0 往下
          openWatch: true, //开启data实时监听
          singleHeight: 0, //单条数据高度有值hoverStop关闭
          waitTime: 1000 //单步停止等待时间
        }
      }
登录后复制

TKS

vue-seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。

相关推荐：

jquery滚动组件(vticker.js)实现页面动态数据的滚动效果_jquery

基于滚动条位置判断的简单实例_javascript技巧

css实现隐藏滚动条的代码案例

以上是vue的无缝滚动组件详解的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
滚动 组件 详解
来源：php.cn
上一篇：JavaScript 中数组操作注意点基础 下一篇：详解React受控组件与非受控组件
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
来自于 2024-04-06 22:01:35
0
3
816
解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...
来自于 2024-04-06 20:22:15
0
1
454
使用MySQL SQL查询计算另一张表中字段的总和 我有一个这样的模式：具有属性“user_id”和“username”的用户表以及具有属性“customer_id”（user_id的FK）和“finalPrice”的订单表数据库架...
来自于 2024-04-06 19:39:29
0
1
441
如何从 customer_name 列中获取名字 selectsubstring(custmer_name,1,instr(custmer_name,''))asfirst_namefromsales.customers;这个解决...
来自于 2024-04-06 17:43:30
0
2
433
使用SCSS生成默认值和CSS变量 我正在实现网站样式。出于遗留支持的原因，我需要支持IE11，至少一段时间。出于工作流程和我的理智原因，我想尽可能使用css变量。我已经研究过这个解决方案，它会生成一些有效的东西，但...
来自于 2024-04-06 17:46:54
0
1
355
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！