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 每次滚动的宽度或者高度。 :::