vue3触底加载解决思路_vue3实现div内部触底加载

vue3触底加载/加载更多

通过第三方插件better-scroll

安装插件

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

引入插件 全局/局部引入 以局部为栗子

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

插件使用

在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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

通过原生scroll事件

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

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

通过IntersectionObserverAPI

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

onMounted(() => {
    const observe = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if(entry.isIntersecting) {
                console.log('元素进入视图窗口',loadMoreEl.value);
                load();
            }
        })
    })
    observe.observe(loadMoreEl.value!);
})
1
2
3
4
5
6
7
8
9
10
11

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

1