事件
better-scroll 除了提供了丰富的 API 调用,还提供了一些事件,方便和外部做交互。你可以利用他们实现一些更高级的 feature。
beforeScrollStart
- 参数:无
- 触发时机:滚动开始之前。
scrollStart(滚动开始触发, ⭐⭐⭐⭐⭐)
参数:无 触发时机:滚动开始时。
scroll(滚动过程触发, ⭐⭐⭐⭐⭐)
- 参数:{Object} {x, y} 滚动的实时坐标
- 触发时机:滚动过程中,具体时机取决于选项中的 probeType。
scrollCancel
- 参数:无
- 触发时机:滚动被取消。
scrollEnd (滚动结束触发, ⭐⭐⭐⭐⭐)
- 参数:{Object} {x, y} 滚动结束的位置坐标
- 触发时机:滚动结束。
touchEnd
- 参数:{Object} {x, y} 位置坐标
- 触发时机:鼠标/手指离开。
flick
- 参数:无
- 触发时机:轻拂时。
refresh (重置, ⭐⭐⭐⭐⭐)
- 参数: 无
- 触发时机:refresh 方法调用完成后。
destroy
- 参数:无
- 触发时机:destroy 方法调用完成后。
pullingDown (下拉触发, ⭐⭐⭐⭐⭐)
- 参数:无
- 触发时机:在一次下拉刷新的动作后,这个时机一般用来去后端请求数据。
pullingUp (上拉触发, ⭐⭐⭐⭐⭐)
- 参数:无
- 触发时机:在一次上拉加载的动作后,这个时机一般用来去后端请求数据。
zoomStart
- 参数:无
- 触发时机:缩放开始时。
zoomEnd
- 参数:无
- 触发时机:缩放结束后。
问题
loading图
存放loading状态的盒子在初始化的时候偏移了自身高度-100%,下拉才会出现具体请看官网操作 loading设置方法,请点我
设置了纵向滑动后横向滑动失效 (我就吃了这个亏)
两种解决办法
- eventPassthrough = 'horizontal'
- freeScroll = true
这里备注一下这两个属性
eventPassthrough
- 类型: String
- 默认值:''
- 可选值:'vertical'、'horizontal'
- 作用:有时候我们使用 better-scroll 在某个方向模拟滚动的时候,希望在另一个方向保留原生的滚动(比如轮播图,我们希望横向模拟横向滚动,而纵向的滚动还是保留原生滚动,我们可以设置 eventPassthrough 为 vertical;相应的,如果我们希望保留横向的原生滚动,可以设置eventPassthrough为 horizontal)。
- 备注:eventPassthrough 的设置会导致其它一些选项配置无效,需要小心使用它。
freeScroll
- 类型:Boolean
- 默认值:false
- 作用:有些场景我们需要支持横向和纵向同时滚动,而不仅限制在某个方向,这个时候我们只要设置 freeScroll 为 true 即可。
- 备注:当设置 eventPassthrough 不为空的时候,该配置无效。
结束
努力学习