better-scroll(事件和滚动问题总结)

1,214 阅读2分钟

事件

better-scroll 除了提供了丰富的 API 调用,还提供了一些事件,方便和外部做交互。你可以利用他们实现一些更高级的 feature。

beforeScrollStart

  1. 参数:无
  2. 触发时机:滚动开始之前。

scrollStart(滚动开始触发, ⭐⭐⭐⭐⭐)

参数:无 触发时机:滚动开始时。

scroll(滚动过程触发, ⭐⭐⭐⭐⭐)

  1. 参数:{Object} {x, y} 滚动的实时坐标
  2. 触发时机:滚动过程中,具体时机取决于选项中的 probeType。

scrollCancel

  1. 参数:无
  2. 触发时机:滚动被取消。

scrollEnd (滚动结束触发, ⭐⭐⭐⭐⭐)

  1. 参数:{Object} {x, y} 滚动结束的位置坐标
  2. 触发时机:滚动结束。

touchEnd

  1. 参数:{Object} {x, y} 位置坐标
  2. 触发时机:鼠标/手指离开。

flick

  1. 参数:无
  2. 触发时机:轻拂时。

refresh (重置, ⭐⭐⭐⭐⭐)

  1. 参数: 无
  2. 触发时机:refresh 方法调用完成后。

destroy

  1. 参数:无
  2. 触发时机:destroy 方法调用完成后。

pullingDown (下拉触发, ⭐⭐⭐⭐⭐)

  1. 参数:无
  2. 触发时机:在一次下拉刷新的动作后,这个时机一般用来去后端请求数据。

pullingUp (上拉触发, ⭐⭐⭐⭐⭐)

  1. 参数:无
  2. 触发时机:在一次上拉加载的动作后,这个时机一般用来去后端请求数据。

zoomStart

  1. 参数:无
  2. 触发时机:缩放开始时。

zoomEnd

  1. 参数:无
  2. 触发时机:缩放结束后。

问题

loading图

存放loading状态的盒子在初始化的时候偏移了自身高度-100%,下拉才会出现具体请看官网操作 loading设置方法,请点我

设置了纵向滑动后横向滑动失效 (我就吃了这个亏)

两种解决办法

  1. eventPassthrough = 'horizontal'
  2. freeScroll = true

这里备注一下这两个属性

eventPassthrough

  1. 类型: String
  2. 默认值:''
  3. 可选值:'vertical'、'horizontal'
  4. 作用:有时候我们使用 better-scroll 在某个方向模拟滚动的时候,希望在另一个方向保留原生的滚动(比如轮播图,我们希望横向模拟横向滚动,而纵向的滚动还是保留原生滚动,我们可以设置 eventPassthrough 为 vertical;相应的,如果我们希望保留横向的原生滚动,可以设置eventPassthrough为 horizontal)。
  5. 备注:eventPassthrough 的设置会导致其它一些选项配置无效,需要小心使用它。

freeScroll

  1. 类型:Boolean
  2. 默认值:false
  3. 作用:有些场景我们需要支持横向和纵向同时滚动,而不仅限制在某个方向,这个时候我们只要设置 freeScroll 为 true 即可。
  4. 备注:当设置 eventPassthrough 不为空的时候,该配置无效。

结束

努力学习