Vue3动态渲染,betterScroll无法滚动(图片加载也兼容)-创新互联
// 解决动态渲染无法滚动问题
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) // 停止观察
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
为洮北等地区用户提供了全套网页设计制作服务,及洮北网站建设行业解决方案。主营业务为成都网站制作、成都做网站、洮北网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!分享名称:Vue3动态渲染,betterScroll无法滚动(图片加载也兼容)-创新互联
分享地址:http://myzitong.com/article/cojiep.html