踩坑Better-Scroll框架

因为js原生的滚动条scroll在移动端会有卡顿的现象,所以开发者常常会使用scroll类的框架,比如 better-scroll 。

但是使用 better-scroll 需要注意一些问题。

当BScroll中的内容没有设置高度,而且包含图片的时候,有可能出现“拉不下去”的情况 :

因为使用BScroll的时候,需要有一个.wrapper盒子包裹.content盒子。

当.content的内容高度高于.wrapper时,Bscroll便会出现滚动条,让用户可滚动以看完.contnt中的内容。

需要注意,这个可滚动的高度是由BScroll计算出来的,它内部有一个属性叫ScrollerHeight,其实就是.content与.wrapper的高度差,也是用户可滚动区域的高度。

所以问题就来了,因为图片等资源的加载是异步的,所以当你的.content包含大量的图片的时候,有可能这个ScrollerHeight已经计算出来了,但我们的图片可能还没有加载完成。

比如,当图片还没有加载完成的时候,BScroll计算出的ScrollerHeight是2000px,故用户可滚动区域被设定为2000px。

但是当图片加载下来之后,因为图片会撑起内容的高度,因而实际高度差会变大,那么此时用户可滚动高度就不应该是2000px了。但是BScroll却不会再重新计算ScrollerHeight,所以就会产生,明明我内容还没有看完,但是我滚动条拉不下去同时内容也卡在中间的情况,因为我能滚动的高度就只有ScrollerHeight所设定的高度那么高。

解决方法是在图片等资源加载完成后,调用BScroll的refresh方法,让它重新计算一次ScrollerHeight。

以下代码是在组件创建并挂载好后,让它监听自定义事件 itemImageLoad ,当图片加载完成时,它便会监听到这个事件,并执行scroll的scroll.refresh()方法,就能重新计算ScrollHeight了。

  mounted() {
    //图片加载完成的事件监听
    this.$bus.$on("itemImageLoad", () => {
      this.$refs.scroll.scroll.refresh();
    });
  },

当然,因为图片加载是异步的,所以图片如果能在BScroll计算ScrollerHeight前加载完成,或者提前写死内容区域的高度,是不会遇到这种情况的。

另外,在BScroll内使用fixed定位,也会遇到定位不准确的问题。

比如要完成吸顶效果,可能就要复制多一个一样的组件,然后通过控制显隐来达到效果,而不能简简单单通过改变定位方式来完成了。

后记:基本解决好这些个bug就没有太大问题了。

猜你喜欢

转载自blog.csdn.net/weixin_42207975/article/details/107154853