BetterScroll插件之observeDOM

标签：插件 BetterScroll observeDOM 滑动 BScroll scroll 页面

在实现移动端页面的上下滑动过程，发现只有进行页面刷新然后从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()   }) }

标签：插件,BetterScroll,observeDOM,滑动,BScroll,scroll,页面
From： https://www.cnblogs.com/Ly021/p/17682289.html