选项 / 高级
better-scroll 还支持一些高级配置,来实现一些特殊的 feature。
wheel
- 类型:Boolean | Object
- 默认值:false
- 作用:这个配置是为了做 Picker 组件用的,默认为 false,如果开启则需要配置一个 Object。
wheel:{ selectedIndex: 0, rotate: 25, adjustTime: 400, wheelWrapperClass: 'wheel-scroll', wheelItemClass: 'wheel-item' }
- 备注:这是一个高级的配置,一般场景不需要配置,具体应用场景可见 Picker Demo 。想了解更多的细节可以去看 example 中的 picker 组件的代码。注意:如果配置为 Object 的时候
wheelWrapperClass
和wheelItemClass
必须对应于你的实例better-scroll
的wrapper
类名和wrapper
内的子类名。二者的默认值是 "wheel-scroll
"/"wheel-item
",如果你不配置或者配置的名称和你对应DOM节点的类名不一致的话会导致一个问题:滚动起来的时候点击一下终止滚动并不会触发scrollEnd
事件,进而影响诸如城市选择器联动数据的这种组件的结果。
snap
- 类型:Boolean | Object
- 默认值:false
- 作用:这个配置是为了做 Slide 组件用的,默认为 false,如果开启则需要配置一个 Object,例如:
注意: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) } } }
loop
为 true 是为了支持循环轮播,但只有一个元素的时候,loop
为 true 是无效的,也并不会 clone 节点。threshold
表示可滚动到下一个的阈值,easing
表示滚动的缓动函数。 - 备注:这是一个高级的配置,一般场景不需要配置,具体应用场景可见 Slide Demo 。想了解更多的细节可以去看 example 中的 slide 组件的代码。
scrollbar
- 类型:Boolean | Object
- 默认值:false
- 作用:这个配置可以开启滚动条,默认为 false。当设置为 true 或者是一个 Object 的时候,都会开启滚动条,例如:
scrollbar: { fade: true, interactive: false // 1.8.0 新增 }
fade
为 true 表示当滚动停止的时候滚动条是否需要渐隐,interactive
表示滚动条是否可以交互。 见 Demo 。了解更多的细节可以去看 example 中的 scroll 组件代码。
pullDownRefresh
- 类型:Boolean | Object
- 默认值:false
- 作用:这个配置用于做下拉刷新功能,默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启下拉刷新,例如:
可以配置顶部下拉的距离(pullDownRefresh: { threshold: 50, stop: 20 }
threshold
) 来决定刷新时机以及回弹停留的距离(stop
)。当下拉刷新数据加载完毕后,需要执行finishPullDown
方法。见 Demo 。 了解更多的细节可以去看 example 中的 scroll 组件代码。
pullUpLoad
- 类型:Boolean | Object
- 默认值:false
- 作用:这个配置用于做上拉加载功能,默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启上拉加载,例如:
可以配置离(pullUpLoad: { threshold: 50 }
threshold
)来决定开始加载的时机。当上拉加载数据加载完毕后,需要执行finishPullUp
方法。见 Demo 。 了解更多的细节可以去看 example 中的 scroll 组件代码。
mouseWheel(v1.8.0+)
- 类型:Boolean | Object
- 默认值:false
- 作用:这个配置用于 PC 端的鼠标滚轮,默认为 false,。当设置为 true 或者是一个 Object 的时候,可以开启鼠标滚轮,例如:
mouseWheel: { speed: 20, invert: false, easeTime: 300 }
speed
表示鼠标滚轮滚动的速度,invert
为 true 表示滚轮滚动和时机滚动方向相反,easeTime
表示滚动动画的缓动时长,见Demo。