vuescroll使用文檔

export default {
// 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,
/** 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
}
};