vue3触底加载解决思路及分析
作者：没用的·阿吉
这段SEO描述融合了“better-scroll插件”、“IntersectionObserverAPI”和“onMounted”,概括了文章关于通过第三方插件引入、局部引入实例创建及事件使用的核心内容
通过第三方插件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('触底');
}
}
通过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!);
})
load(); } }) }) observe.observe(loadMoreEl.value!); })
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。