基于vue.js无缝滚动效果


Posted in Javascript onJanuary 25, 2018

一个简单的基于vue.js的无缝滚动

基于vue.js无缝滚动效果 

:feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document

安装

NPM

npm install vue-seamless-scroll --save

使用

ES6

详情的demo页面 example-src/App.vue

// **main.js**
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
<template>
 <vue-seamless-scroll></vue-seamless-scroll>
</template>
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
<template>
 <scroll-seamless></scroll-seamless>
</template>

普通的使用方法 (script标签引入)

Example:

详情的demo页面 test/test.html

<html>
<head>
 ...
</head>
<body>
 <div id="app">
  <vue-seamless-scroll></vue-seamless-scroll>
 </div>
 <script src="vue.js"></script>
 <script src="vue-seamless-scroll"></script>
 <script>
  new Vue({
   el: '#app'
  })
 </script>
</body>
</html>

配置项默认值

defaultOption () {
    return {
     step: 1, //数值越大速度滚动越快
     limitMoveNum: 5, //开始无缝滚动的数据量 //this.dataList.length
     hoverStop: true, //是否开启鼠标悬停stop
     direction: 1, // 0向下 1向上 2向左 3向右
     openWatch: true, //开启数据实时监控刷新dom
     singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
     singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
     waitTime: 1000 //单步运动停止的时间(默认值1000ms)
    }
   }

总结

以上所述是小编给大家介绍的基于vue.js无缝滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 #Javascript
vue通过路由实现页面刷新的方法
Jan 25 #Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
JavaScript实现职责链模式概述
Jan 25 #Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 #Javascript
You might like
重置版战役片段
2020/04/09 魔兽争霸
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python中os模块详解
2016/10/14 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python实现微信自动回复功能
2018/04/11 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
毕业生找工作的求职信范文
2013/12/24 职场文书
安全资金保障制度
2014/01/23 职场文书
五好党支部事迹材料
2014/02/06 职场文书
好的旅游活动方案
2014/08/19 职场文书
嘉宾邀请函
2015/01/31 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Nginx HTTP跳转至HTTPS
2022/05/15 Servers