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);