onMounted(() => {
onReachBottom()
})
onBeforeUnmount(() => {
window.removeEventListener('resize', getWindowResize)
window.removeEventListener('scroll', onBottom)
})
// 触底函数
const onReachBottom = () => {
window.addEventListener('scroll', onBottom)
}
// 触底相应函数
const onBottom = () => {
// 获取可视高度
let clientHeight = document.documentElement.clientHeight;
// 获取滚动高度
let scrollTop = document.documentElement.scrollTop
// 滚动条高度
let scrollHeight = document.documentElement.scrollHeight
// console.log(clientHeight + scrollTop);
// console.log(scrollHeight);
if (clientHeight + scrollTop + 500 >= scrollHeight && !loading.value) {
console.log('触底了')
loading.value = true
const instance = LoadingPlugin({
attach: () => content.value,
showOverlay: false,
size: '20px',
});
page.value++
let mold = ref('')
if (props.mold == 'new') {
mold.value = 'new'
} if (props.mold == 'hot') {
mold.value = 'hot'
} if (props.mold == 'mine') {
mold.value = 'mine'
}
getGallery(page.value, mold.value).then(res => {
console.log(res);
if (res.status == 'ok') {
instance.hide();
list.value.push(...res.data)
loading.value = false
}
})
}
}
【以下回答由 GPT 生成】
问题梳理准确无误，以下是对问题的期望结果的补充：
期望结果是，在Vue3中能够通过适当的方式添加和移除当前组件的滚动监听事件，以确保其在需要时触发，不需要时停止触发。需要尽可能使用Vue3的特性和API来实现这一功能。
另外，鉴于提供的代码片段只是一个部分，且缺少一些变量和函数的定义，如果可能的话，请提供完整的代码或更多的上下文信息，以便更好地理解问题。谢谢！
【相关推荐】