Vue3动态渲染，betterScroll无法滚动（图片加载也兼容）

最新推荐文章于 2023-05-22 17:41:11 发布

小何plus

最新推荐文章于 2023-05-22 17:41:11 发布

阅读量415

点赞数

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/qq_23260639/article/details/128151551

版权

// 解决动态渲染无法滚动问题
let observer
onMounted(() => {
  nextTick(() => {
    const observerOptions = {
      subtree: true, // 观察后代节点
      childList: true, // 观察目标子节点添加或者删除
    }
    const callback = (mutationList, observer) => {
      for (let i = 0; i < mutationList.length; i++) {
        const mutation = mutationList[i]
        if (mutation.type !== 'childList') continue

        // 节点渲染完刷新滚动
        nextTick(refreshAppPageScroll)

        // 新增图片加载完后刷新滚动
        let imgs = mutation.target.getElementsByTagName('img')
        if (!imgs.length) continue
        const promiseList = [...imgs].map(
          (img) =>
            new Promise((resolve) => {
              img.addEventListener('load', resolve)
            })
        )
        Promise.all(promiseList).then(refreshAppPageScroll)
      }
    }
    observer = new MutationObserver(callback)
    observer.observe(pagebody.value, observerOptions)
  })
})
onUnmounted(observer?.disconnect) // 停止观察