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使用文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。