12 vue深入难点之封装高级钩子函数hook.js监听界面滚动详解

small_wh1te_coder

已于 2024-05-26 21:46:23 修改

阅读量182

点赞数 2

文章标签：前端 javascript vue.js

于 2024-04-18 21:16:04 首次发布

本文链接：https://blog.csdn.net/c5dnuser/article/details/137937823

版权

最近在界面中自己实现了一个模块，简易版监听界面滚动
后续将会封装到一个hook中，实现钩子通用性

// 监听窗口滚动
// 离开之后应该移除监听，
// 别的页面也可以监听
const scrollListenerHandler = ()=>{
    const clientH = document.documentElement.clientHeight
    const scrollT = document.documentElement.scrollTop
    const scrollH = document.documentElement.scrollHeight
    console.log("1:",clientH,"2:",scrollT,"sum:",(clientH+scrollT),"3:",scrollH)
    if(clientH+scrollT>=scrollH){
        console.log("到头了，load！！")
        homeStore.fetchHouseListData()
    }
}

onMounted(()=>{
    window.addEventListener("scroll",scrollListenerHandler)
})
onUnmounted(()=>{
    window.removeEventListener("scroll",scrollListenerHandler)

})

最终版本的代码与调用方法分为两步，

1.直接在home中调用scroll并传入回调钩子

// 回调函数FN传入，自动执行获取网络houselistData数据获取
useScroll(()=>{
   homeStore.fetchHouseListData()
 })

2.监听watch 是否到达底部的响应式数据，再根据后续处理newValue


const { isReachBottom } = useScroll()

watch(isReachBottom, (newValue) => {
    if (newValue) {
        console.log("监听到了新值：", newValue);
        isReachBottom.value = false;
        homeStore.fetchHouseListData()
    }

})

初次接触这种很绕的代码部分初学者可能会觉得很绕，写多了，就越发适应这种高度封装的优美代码

ps:最后，大家可能会遇到一些小bug，我也是一直找不到原由，最后用log函数，打印出来最后的结果才发现：

机器运算时可能存在抹掉小数点的情况，所以大家可以看看log，看看sum是不是真的大于Scrollheight再决定

 const scrollListenerHandler = throttle(() => {
        clientHeight.value = document.documentElement.clientHeight
        scrollTop.value = document.documentElement.scrollTop
        scrollHeight.value = document.documentElement.scrollHeight
        console.log("1:", clientHeight.value, "2:", scrollTop.value,"sum:",clientHeight.value+scrollTop.value, "----3:", scrollHeight.value)

        if (clientHeight.value + scrollTop.value >= scrollHeight.value-1) {
          console.log("滚动到底部了")
          isReachBottom.value = true
        }
      }, 10)