基于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 相关文章推荐
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
javascript实现扫雷简易版
Aug 18 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
php好代码风格的阶段性总结
2016/06/25 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
javaScript基础详解
2017/01/19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
初婚未育证明
2014/01/15 职场文书
国税会议欢迎词
2014/01/16 职场文书
21岁生日感言
2014/02/27 职场文书
学习决心书
2014/03/11 职场文书
党员演讲稿
2014/09/04 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang