Advanced Options

better-scroll also supports several advanced options to implement some special features.

wheel

  • Type: Boolean | Object
  • Default: false
  • Usage: this option is used to configure Picker component. You can enable picker by configure it as an Object, like:
    wheel:{
      selectedIndex: 0,
      rotate: 25,
      adjustTime: 400,
      wheelWrapperClass: 'wheel-scroll',
      wheelItemClass: 'wheel-item'
    }
    
  • Note: it's an advanced option which doesn't need to configure in normal scene. You can see the specific application scene in Picker Demo and more details in the source code of picker component.

snap

  • Type: Boolean | Object
  • Default: false
  • Usage: this option is used to configure Slide component. You can enable slide by configure it as an Object, like:

    snap: {
      loop: false,
      threshold: 0.1,
      stepX: 100,
      stepY: 100,
      easing: {
        style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        fn: function(t) {
            return t * (2 - t)
        }
      }
    }
    

    Notice:loop set to true to support slide loop,but when there is only one element, loop is invalid for true, and it won't clone nodes. threshold is the threshold of going to the next snap,easing is the scroll easing function.

  • Note: it's an advanced option which doesn't need to configure in normal scene. You can see the specific application scene in Slide Demo and more details in the source code of slide component.

scrollbar

  • Type: Boolean | Object
  • Default: false
  • Usage: this option is used to configure scroll bar. You can enable scroll bar by configure it as true or an Object, like:
    scrollbar: {
      fade: true,
      interactive: false // new in 1.8.0
    }
    
    fade is about whether the scroll bar fade when scroll stop, and it's true by default.interactive is about whether the scroll bar could be interactive.You can see Demo and more details in the source code of scroll component.

pullDownRefresh

  • Type: Boolean | Object
  • Default: `false
  • Usage: this option is used to configure pulling down refresh. You can enable pulling down refresh by configure it as true or an Object, like:
     pullDownRefresh: {
       threshold: 50,
       stop: 20
     }
    
    threshold is about the distance exceeded the border which decide the trigger of pullingDown event. Stop is the position where rebound stop at. When the data loading cause by pulling down is finished, you must call finishPullDown method. You can see Demo and more details in the source code of scroll component.

pullUpLoad

  • Type: Boolean | Object
  • Default: false
  • Usage: this option is used to configure pulling up load. You can enable pulling up load by configure it as true or an Object, like:
    pullUpLoad: {
     threshold: 50
    }
    
    threshold is about the distance exceeded the border which decide the trigger of pullingUp event. When the data loading cause by pulling up is finished, you must call finishPullUp method. You can see Demo and more details in the source code of scroll component.

mouseWheel(v1.8.0+)

  • Type:Boolean | Object
  • Default:false
  • Usage:this option is used for PC mouse wheel. You can enable mouse wheel by configure it as true or an Object,like:
    mouseWheel: {
      speed: 20,
      invert: false
    }
    
    speed is the speed of mouse wheel, invert is about whether the direction of mouse wheel and the direction of real scroll are opposite, easeTime is the ease time of the rolling animation. You can see Demo

zoom(v1.11.0+)

  • Type:Boolean | Object
  • Default:false
  • Usage:this option is used to zoom in scroll content,default to false。When you set it to true or a Object, you can zoom in,like:
    zoom: {
     start: 1,
     min: 1,
     max: 4
    }
    
    start represents the initial scaling, min represents the smallest scaling, and max represents the maximum scaling.

results matching ""

    No results matching ""