plugins/observe-dom

优质
小牛编辑
130浏览
2023-12-01

开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后,当这些 DOM 元素发生变化时,将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性:

  • 针对改变频繁的 CSS 属性,增加 debounce
  • 如果改变发生在 scroll 动画过程中,则不会触发 refresh

安装

npm install @better-scroll/observe-dom --save

// or

yarn add @better-scroll/observe-dom

使用

  import BScroll from '@better-scroll/core'
  import ObserveDOM from '@better-scroll/observe-dom'
  BScroll.use(ObserveDOM)

  new BScroll('.bs-wrapper', {
    //...
    observeDOM: true // 开启 observe-dom 插件
  })

示例

<<< @/examples/vue/components/observe-dom/default.vue?template <<< @/examples/vue/components/observe-dom/default.vue?script <<< @/examples/vue/components/observe-dom/default.vue?style

:::warning 注意 由于插件的内部实现使用的是 MutationObserver,它无法探测到 img 标签的是否加载完成,因此对于 content 内部含有不确定高度的图片,需要等图片加载完成再调用 bs.refresh() 来重新计算可滚动尺寸。如果浏览器不支持 MutationObserver,插件内部的降级方案是每秒重新计算可滚动的尺寸。 :::

:::tip 提示 v2.1.0 版本,新增 https://www.xnip.cn/doc/2NCTMTxSobserve-image 插件来探测 img 标签的加载,因此这两者可以搭配起来,补齐主动刷新的能力来更新 BetterScroll 每次滚动的宽度或者高度。 :::