vue3触底加载解决思路

最新推荐文章于 2025-03-21 19:24:31 发布

原创最新推荐文章于 2025-03-21 19:24:31 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #vue

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用better-scroll第三方库实现触底加载和加载更多功能，包括全局和局部引入插件、基于原生scroll事件以及利用IntersectionObserverAPI进行异步观察。

vue3触底加载/加载更多

通过第三方插件`better-scroll`

安装插件

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';

插件使用

在onMounted中创建实例

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)
}

通过原生`scroll`事件

<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('触底');
     }
}

通过`IntersectionObserver`API

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法

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