这个是vue3的移动端相关的代码，主要是封装以后可以在多个页面中使用。
一、封装到hooks文件夹
import {
onMounted, onUnmounted, ref } from 'vue';
import {
throttle } from 'underscore'
// export default function useScroll(reachBottomCB) {
// const scrollListenerHandler = window.addEventListener('scroll', () => {
// const clientHeight = document.documentElement.clientHeight;
// const scrollTop = document.documentElement.scrollTop;
// const scrollHeight = document.documentElement.scrollHeight;
// if (scrollHeight <= clientHeight + scrollTop) {
// if (reachBottomCB) reachBottomCB()
// }
// })
// onMounted(() => {
// window.addEventListener('scroll', scrollListenerHandler)
// })
// onUnmounted(() => {
// window.removeEventListener('scroll', scrollListenerHandler)
// })
// }
export default function useScroll() {
const isReachBottom = ref(false) // 定义一个是否已经滚动到底部的布尔值
const scrollListenerHandler = () => {
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight;
// 滚动到了底部
if (scrollHeight <= clientHeight + scrollTop) {
console.log("滚动到底部了")
isReachBottom.value = true
}
}
// 页面首次加载
onMounted(() => {
window.addEventListener('scroll', scrollListenerHandler)
})
// 页面卸载
onUnmounted(() => {
window.removeEventListener('scroll', scrollListenerHandler)
})
return {
isReachBottom }
}
二、在需要的页面中使用
import {
watch } from 'vue'
import useScroll from '@/hooks/useScroll'
const {
isReachBottom } = useScroll() // 获取是否滚动到了底部
// 监听
watch(isReachBottom, (newValue) => {
if (newValue) {
// 1. 如果你的请求是返回的是promise,则可以用下面这个比较严谨的写法，等数据返回之后在把
// isReachBottom 设置为false
// homeStore.fetchHouselistData().then(() => {
// isReachBottom.value = false
// })
// 2. 普通可以这样写
homeStore.fetchHouselistData() // 这个是我的请求
isReachBottom.value = false
}
})
三、在stroe里面的请求
import {
getHomeHouselist } from "@/services";
import {
defineStore } from "pinia";
const useHomeStore = defineStore("home", {
state: () => ({
currentPage: 1,
houselist: []
}),
actions: {
async fetchHouselistData() {
const res = await getHomeHouselist(this.currentPage)
this.houselist.push(...res.data) // 数组的合并
this.currentPage++
}
}
})
export default useHomeStore
这个就是可以通用的监听滚动的一个函数。
四、节流版本
如果觉得滚动的时候一直监听不是很好，也可以加一个节流。
我这里使用的是第三方库：
npm install underscore
代码：
export default function useScroll() {
const isReachBottom = ref(false)
const clientHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
// 防抖/节流
const scrollListenerHandler = throttle(() => {
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
}
}, 100)
onMounted(() => {
window.addEventListener("scroll", scrollListenerHandler)
})
onUnmounted(() => {
window.removeEventListener("scroll", scrollListenerHandler)
})
return {
isReachBottom, clientHeight, scrollTop, scrollHeight }
}