vuescroll一个很不错的在vue上面使用的滚动条插件,但是之前使用的时候没有文档,官网打不开,现在更新了,文档也有了,好用多了,现在摘录一下主要的文档以便官网哪天又挂了。

这篇文档发表时vuescroll的版本更新至4.9.0-beta.15,一些新特性可能需要更新版本才能正常使用。

以下是一些主要的配置项。

完整的全局配置:

export default {// vuescroll
  vuescroll: {mode: 'native',// 设置 vuescroll的大小类型, 可选的有percent, number.     // 设置为percent会把 vuescroll 的 height 和 width 设置成100%,    // 设置成number的话 vuescroll 会自动计算父元素的大小,并将height和width设置成对应的数值。    // 提示:如果父元素的尺寸为百分比大小时建议设置成number,如果父元素大小为一个固定的px的值,那么设置为百分比比较合适一些。sizeStrategy: 'percent',// 是否开启监听 dom resizedetectResize: true,// 下拉刷新相关(slide mode)
    pullRefresh: {enable: false,// 下拉刷新的提示tips: {deactive: 'Pull to Refresh',active: 'Release to Refresh',start: 'Refreshing...',beforeDeactive: 'Refresh Successfully!'}},// 上推加载相关pushLoad: {enable: false,tips: {deactive: 'Push to Load',active: 'Release to Load',start: 'Loading...',beforeDeactive: 'Load Successfully!'},auto: false,autoLoadDistance: 0},paging: false,zooming: true,// 快照snapping: {enable: false,width: 100,height: 100},/* shipped scroll options */scroller: {/*允许滚动出边界true 或者 false 或者一个数组指定哪个方向可以超出边界,可选项分别是:['top','bottom','left','right']*/bouncing: true,/** Enable locking to the main axis if user moves only slightly on one of them at start */locking: true,/** 最小缩放级别 */minZoom: 0.5,/** 最大缩放级别 */maxZoom: 3,/** 滚动速度的倍速 **/speedMultiplier: 1,/** 到达边界时应用于减速的改变量  **/penetrationDeceleration: 0.03,/** 到达边界时应用于加速的改变量  **/penetrationAcceleration: 0.08,/** Whether call e.preventDefault event when sliding the content or not */preventDefault: true,/** Whether call preventDefault when (mouse/touch)move*/preventDefaultOnMove: true}},scrollPanel: {// 组件加载完后的初始滚动量initialScrollY: false,initialScrollX: false,// 是否禁止x或y方向上的滚动scrollingX: true,scrollingY: true,speed: 300,// 滚动动画easing: undefined,// 是否有一个padding样式,样式的大小应该和rail/bar的大小是一样。可以用来阻止内容被滚动条遮住一部分padding: false,// 有时候原声滚动条可能在左侧,// 请查看 https://github.com/YvesCoding/vuescroll/issues/64verticalNativeBarPos: 'right'},//滚动条滚动的地方
   rail: {background: '#01a99a',opacity: 0,border: 'none',/** Rail's size(Height/Width) , default -> 6px */size: '6px',/** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/specifyBorderRadius: false,/** Rail the distance from the two ends of the X axis and Y axis. **/gutterOfEnds: null,/** Rail the distance from the side of container. **/gutterOfSide: '2px',/** Whether to keep rail show or not, default -> false, event content height is not enough */keepShow: false},bar: {/** 当不做任何操作时滚动条自动消失的时间 */showDelay: 500,/** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/specifyBorderRadius: false,/** 是否只在滚动的时候现实滚动条 */onlyShowBarOnScroll: true,/** 是否保持显示 */keepShow: false,/** 滚动条颜色, default -> #00a650 */background: 'rgb(3, 185, 118)',/** 滚动条透明度, default -> 1  */opacity: 1,/** Styles when you hover scrollbar, it will merge into the current style */hoverStyle: false},scrollButton: {enable: false,background: 'rgb(3, 185, 118)',opacity: 1,step: 180,mousedownStep: 30}
};

转载于:https://www.cnblogs.com/xf110/p/10032027.html

vuescroll使用文档相关推荐

  1. 导出swagger2生成的文档

    百度了好多篇用法,没法用.特此记录一下 一.下载项目 下载https://github.com/Swagger2Markup/spring-swagger2markup-demo下的项目,保存,注意文 ...

  2. README 规范和项目文档规范

    1. README 规范 我们直接通过一个 README 模板,来看一下 README 规范中的内容: # 项目名称<!-- 写一段简短的话描述项目 -->## 功能特性<!-- 描 ...

  3. FastAPI 自动生成的docs文档没法使用

    FastAPI 自动生成的docs文档没法使用,当展开路径时候一直在转圈,具体就是这样 这个是由于swagger-ui 3.30.1 中的bug导致,具体bug可以看这里 我们可以通过在FastAPI ...

  4. 【软件工程】VB版机房文档总结

    前言: 软工视频+软工文档+UML视频+UML图的学习过程图! 这部分的知识很厚,只是知道了个大概!最开始 慢悠悠的像个老爷爷走进度,后来遇到点什么事,妈呀,管不了那么多了,赶紧弄完在说,拖了多久了都 ...

  5. 智能文档理解:通用文档预训练模型

    预训练模型到底是什么,它是如何被应用在产品里,未来又有哪些机会和挑战? 预训练模型把迁移学习很好地用起来了,让我们感到眼前一亮.这和小孩子读书一样,一开始语文.数学.化学都学,读书.网上游戏等,在脑子 ...

  6. 基于javaGUI的文档识别工具制作

    基于javaGUI的文档识别工具制作 对于某些文本,其中富含了一些标志,需要去排除,以及去获得段落字数,以下是我个人写的一个比较简单的文档识别工具,含导入文件.导出文件以及一个简单的识别功能. 1.功 ...

  7. 从单一图像中提取文档图像:ICCV2019论文解读

    从单一图像中提取文档图像:ICCV2019论文解读 DewarpNet: Single-Image Document Unwarping With Stacked 3D and 2D Regressi ...

  8. 函数小知识点(文档字符串,闭包等)

    1 文档字符串(Documentation Strings) 一般被称为docstring,一款你应当使用的重要工具,它能够帮助你更好地记录程序并让其更加易于理解.令人惊叹的是,当程序实际运行时,我们 ...

  9. Spring Boot 集成Swagger2生成RESTful API文档

    Swagger2可以在写代码的同时生成对应的RESTful API文档,方便开发人员参考,另外Swagger2也提供了强大的页面测试功能来调试每个RESTful API. 使用Spring Boot可 ...

最新文章

  1. js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果),本文实例讲述了JS实现的N多简 - phpStudy...
  2. 实战c++中的vector系列--vectorlt;unique_ptrlt;gt;gt;初始化(全部权转移)
  3. php递归函数return会出现无法正确返回想要值的情况
  4. 决策树和随机森林(上)
  5. MongoDB学习笔记(二)使用Java操作MongoDB
  6. vue基于element-ui制作的成绩管理系统(四)个人信息
  7. 支付宝APP支付 统一下单 php服务端 tp5
  8. 北邮人工智能学院刘勇教授实验室,招聘博士后研究人员
  9. 81相似标准形02——初等变换、初等矩阵、相抵 (等价)、相抵标准形
  10. Cramer`s Rule 克莱姆法则(克拉默法则)
  11. Quartz定时任务框架(二):Trigger触发器详解
  12. HTTPClient模拟登陆开心网001
  13. OneStep 移植
  14. Altium_Designer不规则焊盘制作
  15. 基于单片机的红外遥控密码锁系统设计(#0407)
  16. 3.1_28_4 JDK8新特性【Date】之ZoneId 时区信息
  17. Google是如何提供“无缝”的街景全景图的?
  18. 数据结构(C语言)第二版 第一章课后答案
  19. Mongodb在Windows上的安装
  20. TextFormat设置中文字体font属性注意的问题

热门文章

  1. 【HDU 1276】士兵队列训练问题(两个队列模拟)
  2. 在windows下查看进程
  3. VMware Vix API 操作虚拟机
  4. 查询GPU是否支持CUDA
  5. 由动态分配和静态分配的数据在内存组成区别
  6. c语言结构体的位操作,C语言之路---结构体、位运算及预处理命令
  7. NFS搭建openfoam
  8. Mysql存储引擎原理
  9. AttributeError系列之:AttributeError: 'tuple' object has no attribute 'shape'
  10. [BUUCTF-pwn]——ciscn_2019_n_5