betterscroll遇到的一些问题

1,120 阅读1分钟

1. 在ios13.4以后,滑动回弹时,会造成页面跳动

解决方案,初始化better-scroll的时候设置:

 this.scroll = new BScroll(this.$refs.wrapper, {
    probeType: this.probeType,
    click: this.click,
    tap: true,
    scrollY: true,
    bounce: { // 加上这一串代码,取消滚动回弹
      top: false,
      bottom: false
    }
  })

2. 一些包含图片的页面无法滚动到底部

如果scroll内部包含不确定高度的图片,那么一定要在图片加载完毕以后(onload事件里面)执行一次scroll的refresh方法,否则,高度的计算会有问题导致。

handleImgLoad () {
  setTimeout(() => {
    this.$emit('handleImgLoad')
  }, 20)
}

3. betterscroll 惯性滚动后按钮无法点击的问题

原因:实例化 scroll 的 dom 的第一个子 dom 下的直接子元素会被加上 pointer-events: none
解决方法:可以对 scroll 组件的结构进行变化

<template>
  <div ref="wrapper" class="scroll-wrap" :class="{isWeb: isWeb}">
    <div class="slot-wrapper">
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

调用 Scroll

<Scroll>
  <div class="p_auto">
    <div class="cotent"></div>
  </div>
</Scroll>
.p_auto {
  pointer-events: auto;
}