有两种方式
方式一:第一步:将逻辑抽取封装在hooks - > useScroll.js中
import { onMounted, onUnmounted } from "vue";
export default function useScroll(reachBottomCB) {
const scrollListenerHandler = () => {
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight;
console.log("-------");
if (clientHeight + scrollTop >= scrollHeight) {
console.log("滚动到底部了");
if (reachBottomCB) reachBottomCB();
}
};
onMounted(() => {
window.addEventListener("scroll", scrollListenerHandler);
});
onUnmounted(() => {
window.removeEventListener("scroll", scrollListenerHandler);
});
}
第二步在组件中引入和使用
import useScroll from "@/hooks/useScroll.js";
//使用
useScroll(() => {
homeStore.fetchHouselistDate();
});
方法二:
第一步:将逻辑抽取封装在hooks - > useScroll.js中
// 第二种方式
export default function useScroll() {
const isReachBottom = ref(false);
const scrollTop = ref(0);
const clientHeight = ref(0);
const scrollHeight = ref(0);
const scrollListenerHandler = () => {
clientHeight.value = document.documentElement.clientHeight;
scrollTop.value = document.documentElement.scrollTop;
scrollHeight.value = document.documentElement.scrollHeight;
if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
console.log("滚动到底部了");
isReachBottom.value = true;
}
};
onMounted(() => {
window.addEventListener("scroll", scrollListenerHandler);
});
onUnmounted(() => {
window.removeEventListener("scroll", scrollListenerHandler);
});
return { isReachBottom, clientHeight, scrollTop, scrollHeight };
}
第二步在组件中引入和使用
import { watch } from "vue";
import useScroll from "@/hooks/useScroll.js";
// 加载更多第二种写法
const { isReachBottom } = useScroll();
watch(isReachBottom, (newValue) => {
if (newValue) {
homeStore.fetchHouselistDate().then(() => {
isReachBottom.value = false;
});
}
});