Vue3 监听移动端的滚动

这个是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 }
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值