vuescroll使用文档
vuescroll一个很不错的在vue上面使用的滚动条插件,但是之前使用的时候没有文档,官网打不开,现在更新了,文档也有了,好用多了,现在摘录一下主要的文档以便官网哪天又挂了。
这篇文档发表时vuescroll的版本更新至4.9.0-beta.15,一些新特性可能需要更新版本才能正常使用。
以下是一些主要的配置项。
完整的全局配置:
data() { return { // vuescroll vuescroll: { mode: 'native', // 设置 vuescroll的大小类型, 可选的有percent, number. // 设置为percent会把 vuescroll 的 height 和 width 设置成100%, // 设置成number的话 vuescroll 会自动计算父元素的大小,并将height和width设置成对应的数值。 // 提示:如果父元素的尺寸为百分比大小时建议设置成number,如果父元素大小为一个固定的px的值,那么设置为百分比比较合适一些。 sizeStrategy: 'percent', // 是否开启监听 dom resize detectResize: 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/64 verticalNativeBarPos: '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, /** 滚动条的尺寸,默认6px **/ size: '6px', /** 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 } } }
常用的API:
scrollIntoView(selector[ , speed])
selector:String,选择器
speed:Number,滚动速度
功能:滚动到某个选择器的位置
<vue-scroll ref="vs"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </vue-scroll>
this.$refs["vs"].scrollIntoView("#d3", 500);