vue3自定义无限滚动

最初使用的vue3-infinite-scroll-better插件进行滚动加载,打包部署后插件滚动功能失效了也不报错很难查找问题出现在哪部分,只好自己写一个相对简单的功能

监控窗体的滚动值

使用的vueuse

import { useWindowScroll } from '@vueuse/core'
//他是响应式的
const { y } = useWindowScroll()

定义监听

const scDisabled = computed(() => {
  //数据长度小于等于总数返回true
  return rArticle.value.length <= state.count
})
//默认50触发加载内容
const cheight = ref(50)
//对窗体高度进行监听
watch(
  () => {
    return [y] 
  },
  async () => {
    if (scDisabled.value) {
      if (y.value > cheight.value) {
        console.log('触发加载')
        cheight.value += 400 //高度
        state.pagesize += 3 //每次加载3行数据
        await GetFy() //加载数据
      }
    }
  },
  { deep: true }
)

当窗体高度大于cheight字段就加载数据内容