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，滚动速度功能：滚动到某个选择器的位置

this.$refs[\"vs\"].scrollIntoView(\"#d3\