vue3触底加载解决思路及分析

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll
npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动

import BScroll from '@better-scroll/core';
import PullUp from '@better-scroll/pull-up';
import MouseWheel  from '@better-scroll/mouse-wheel';

import BScroll from '@better-scroll/core';
import PullUp from '@better-scroll/pull-up';
import MouseWheel  from '@better-scroll/mouse-wheel';
BScroll.use(PullUp);
BScroll.use(MouseWheel);
const showMore = ref<boolean>(false);
const bs = ref<BScroll>();
const scrollRef = ref();
onMounted(() => { 
  getScroll();
}) 
const getScroll = async () => {
  if(!scrollRef.value) return
  if(!bs.value) {
    bs.value = new BScroll(scrollRef.value,{
      scrollY: true,
      probeType:3,
      click: true,  
      mouseWheel: true,
      pullUpLoad: {
        threshold: -50
      }
    }),
    bs.value.on('pullingUp', () => {
      bs.value!.finishPullUp(); 
      bs.value!.refresh(); // 更新BScroll
    })
  }
  
  await nextTick();
  setTimeout(() => {}, 400)
}

<div class="index_pages" ref="scrollRef" @scroll="scroll"></div>

const scrollRef = ref();
const scroll = () => {
	
    if(scrollRef.value!.scrollHeight- scrollRef.value!.clientHeight - scrollRef.value!.scrollTop < 50) {
        // 当剩余高度小于指定的数值时处罚触底
        console.log('触底');
     }
}

onMounted(() => {
    const observe = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if(entry.isIntersecting) {
                console.log('元素进入视图窗口',loadMoreEl.value);
                load();
            }
        })
    })
    observe.observe(loadMoreEl.value!);
})

load();
}
})
})
observe.observe(loadMoreEl.value!);
})