BetterScroll插件之observeDOM

在实现移动端页面的上下滑动过程，发现只有进行页面刷新然后从web端切换到移动端，才能够进行滑动，这要从BScroll的原理说起，因为BScroll进行滑动的条件是内容的模块大小需要大于容器的大小，但是明明已经内容大于容器了，为什么还会无法进行滑动呢，原因是在页面一开始加载时没有获取到数据填充后的大小，所以容器的大小其实是小于内容的大小的，所以使用observeDOM能够在获取数据之后呢，进行refresh操作，重新获取大小，这样就能够进行页面的滑动效果了。

observeDOM的使用。

import BScroll from '@better-scroll/core'

import ObserveDOM from '@better-scroll/observe-dom'

import { onMounted, onUnmounted, ref } from 'vue'

BScroll.use(ObserveDOM)

// ObserveDOM插件的作用在于能够在获取数据之后再次进行refresh，因为BScroll的原理是需要内容的高度大于页面的高度才能进行滑动，在一开始打开页面时，页面不能获取到加载完数据的高度，所以这也是在没添加ObserveDOM插件之前，无法滚动页面的原因

export default function useScroll(wrapperRef, options) {

  const scroll = ref(null)

  onMounted(() => {

    scroll.value = new BScroll(wrapperRef.value, {

      observeDOM: true,

      ...options

    })

  })

  onUnmounted(() => {

    scroll.value.destroy()

  })

}