# 配置项

Vuescroll 的配置项由 5 部分组成, 它们分别是vuescroll, scrollPanel, bar, rail, scrollButton.

# vuescroll

# 概览

  vuescroll: {
    mode: 'native',
    sizeStrategy: 'percent',
    detectResize: true,
    /** 锁定一种滚动方向, 锁定的方向为水平或者垂直方向上滑动距离较大的那个方向 */
    locking: true,
  }

# mode

  • 类型: native|slide
  • 默认值: native

选择一个模式, native 或者 slide.

# sizeStrategy

  • 类型: number|percent
  • 默认值: percent

如果父容器不是固定高度,请设置为 number , 否则保持默认的percent即可。

# detectResize

  • 类型: boolean
  • 默认值: true

是否检测内容尺寸发生变化。

# locking

  • 类型: boolean
  • 默认值: true

是否锁定一种滚动方向, 锁定的方向为水平或者垂直方向上滑动距离较大的那个方向, 相关issue #197

# 尝试一下

打开dev-tool查看不同配置项之间的区别。
mode slide
native
locking false
sizeStrategy percent
number
detectResize true
false

# scrollPanel

介绍

scrollPanel 内容的包装. 我们通过改变 scrollPanel 的 scrollLeft 和 scrollTop 来使内容移动。

# 概览

  scrollPanel: {
    initialScrollY: false,
    initialScrollX: false,
    scrollingX: true,
    scrollingY: true,
    speed: 300,
    easing: undefined,
    verticalNativeBarPos: 'right',
    maxHeight:undefined,
    maxWidth:undefined,
  }

# initialScrollY/initialScrollX

  • 类型: number|string||false

  • 默认值: false

只要组件mounted之后自动滚动的距离。 例如 100 or 10%

# scrollingX/scrollingY

  • 类型: boolean

  • 默认值: true

是否启用 x 或者 y 方向上的滚动。

# speed

  • 类型: number

  • 默认值: 300

多长时间内完成一次滚动。 数值越小滚动的速度越快。

# easing

  • 类型: string|undefined

  • 默认值: undefined

滚动动画, 所有的动画如下:

  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint

# verticalNativeBarPos

  • 类型: right|left

  • 默认值: right

原生滚动条的位置。

# maxHeight

  • 类型: number?

  • 默认值: undefined

这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应,超出的话出现滚动条。

# 尝试一下

调整速度和动画查看效果。
Animation
Speed 800
内容高度 800
maxHeight 300

# rail

# 概览

介绍

滚动条移动所在位置。

  rail: {
    background: '#01a99a',
    opacity: 0,
    size: '6px',
    specifyBorderRadius: false,
    gutterOfEnds: null,
     gutterOfSide: '2px',
    keepShow: false
  }

# background

  • 类型: string

  • 默认值: #a5d6a7

轨道的背景色。

# size

  • 类型: string

  • 默认值: 6px

轨道的尺寸。

# opacity

  • 类型: number

  • 默认值: 0

轨道的透明度。

# specifyBorderRadius

  • 类型: false|string

  • 默认值: false

是否指定轨道的 borderRadius, 如果不那么将会自动设置。

# gutterOfEnds

  • 类型: string

  • 默认值: 2px

轨道距 x 和 y 轴两端的距离。

# gutterOfSide

  • 类型: string

  • 默认值: 2px

距离容器的距离。

# keepShow

  • 类型: boolean

  • 默认值: false

是否即使 bar 不存在的情况下也保持显示。

# border

  • 类型: string

  • 默认值: none

轨道的边框。

# 尝试一下!

rail。
background #cecece
opacity 0.5
border style
Rail Size px

# bar

介绍

滚动条,类似于原生的滚动条。

警告

vRail, hRail, vBar, hBar, pos 都已经失效了。 请用 rail, bar 来代替。 设置 rail,bar 将会对垂直,水平滚动条同时生效。

# 概览

  bar: {
    showDelay: 500,
    onlyShowBarOnScroll: true,
    keepShow: false,
    background: '#c1c1c1',
    opacity: 1,
    hoverStyle: false,
    specifyBorderRadius: false,
    minSize: false,
    size: '6px',
    disable: false,
  }

# onlyShowBarOnScroll

  • 类型: boolean

  • 默认值: true

是否只在滚动时显示 bar。

# showDelay

  • 类型: number

  • 默认值: 500

在鼠标离开容器后多长时间隐藏滚动条。

# background

  • 类型: string

  • 默认值: #4caf50

滚动条背景色。

# keepShow

  • 类型: boolean

  • 默认值: false

滚动条是否保持显示。

# opacity

  • 类型: number

  • 默认值: 1

滚动条透明度。

# specifyBorderRadius

  • 类型: false|string

  • 默认值: false

是否指定滚动条的 borderRadius, 如果不那么和轨道的保持一致。

# minSize

  • 类型: number

  • 默认值: 0

为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.

# size

  • 类型: string

  • 默认值: 6px

bar 的尺寸。

# disable

  • 类型: boolean

  • 默认值: false

是否禁用滚动条。

# 尝试一下!

bar
Background #cecece
Opacity 0.5
Keep Show True: False:
Bar MinSize 0.2
Bar Size px

# scrollButton

# 概览

  scrollButton: {
    enable: false,
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    step: 180,
    mousedownStep: 30
  }

# enable

  • 类型: boolean

  • 默认值: false

是否启用 scrollButton.

# background

  • 类型: string

  • 默认值: rgb(3, 185, 118)

scrollButton 的背景色.

# opacity

  • 类型: number

  • 默认值: 1

scrollButton 的透明度。

# step

  • 类型: number

  • 默认值: 180

每次当你点击 scrollButton 所滚动的距离。

# mousedownStep

  • 类型: number

  • 默认值: 30

每次当你按住 scrollButton 所滚动的距离。

# 尝试一下!

ScrollButton。
scrollButton enable True: False:
scrollButton background #cecece
Bar Size min = 1 px
Rail Size max = 30 px

# vuescroll(native 模式)

# 概览

vuescroll: {
  wheelScrollDuration: 0,
  wheelDirectionReverse: false,
  checkShifKey: true
}

# wheelScrollDuration

  • 类型: number
  • 默认值: 0

滚轮滚动一段距离所需时间。

# wheelDirectionReverse

  • 类型: boolean
  • 默认值: false

是否使滚轮方向相反

# checkShifKey

  • 类型: boolean
  • 默认值: true

是否检测 shift 键位 具体请查看 pr #234

# vuescroll(Slide 模式)

# 概览

  vuescroll: {
    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
    },
     scroller: {
      /*
        Allow to scroll out of boundaries
        true or false or an array specify which direction can be
        bounced. The options can be:
        ['top','bottom','left','right']
      */
      bouncing: {
        top: 100,
        bottom: 100,
        left: 100,
        right: 100
      },
      /** Enable locking to the main axis if user moves only slightly on one of them at start */
      locking: true,
      /** Minimum zoom level */
      minZoom: 0.5,
      /** Maximum zoom level */
      maxZoom: 3,
      /** Multiply or decrease scrolling speed **/
      speedMultiplier: 1,
      /** This configures the amount of change applied to deceleration when reaching boundaries  **/
      penetrationDeceleration: 0.03,
      /** This configures the amount of change applied to acceleration when reaching boundaries  **/
      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,
      // whether to  disable scroller or not.
      disable: false
    }
  }

# pullRefresh

  • 类型: Object

  • 默认值:

{
  enable: false,
  tips: {
    deactive: 'Pull to Refresh',
    active: 'Release to Refresh',
    start: 'Refreshing...',
    beforeDeactive: 'Refresh Successfully!'
  }
},

# pushLoad

  • 类型: Object

  • 默认值:

{
  enable: false,
  tips: {
    deactive: 'Push to Load',
    active: 'Release to Load',
    start: 'Loading...',
    beforeDeactive: 'Load Successfully!'
  },
  auto: false,
  autoLoadDistance: 0
}

# pushLoad.auto

  • 类型: boolean
  • 默认值: false

是否自动触发加载。

# pushLoad.autoLoadDistance

  • 类型: number
  • 默认值: 0

距离底部触发自动加载的距离。

# 尝试一下

一个小例子

你也可以通过 slot 来设置不同的加载/刷新动画.

上次更新: 2020-12-5 15:21:47