基于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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
浅析javascript 定时器
Dec 23 Javascript
requireJS使用指南
Apr 27 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
vue 项目build错误异常的解决方法
Apr 22 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
script标签属性用type还是language
2015/01/21 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python实现线程池的方法
2015/06/30 Python
Python自定义线程类简单示例
2018/03/23 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
升职自荐书范文
2013/11/28 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
2015年元旦活动总结
2014/05/09 职场文书
应聘教师自荐书
2014/06/16 职场文书
欢迎新生标语
2014/10/06 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
新娘婚礼致辞
2015/07/27 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Python Django模型详解
2021/10/05 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
python实现简单的三子棋游戏
2022/04/28 Python
JavaScript设计模式之原型模式详情
2022/06/21 Javascript