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!);
})
load();
}
})
})
observe.observe(loadMoreEl.value!);
})