Vueuse包提供的useIntersectionObserver 方法如何使用(参数;返回值)实现无限下拉信息流
基于 IntersectionObserver 异步监听方法,实现无线信息流下拉加载,<template><div id="app"><!--1. 设置容器元素,view-list--><div class="view-list"><!--2. 循环一个列表,新数据进行追加,下面增加一个loading条--><div class="
·
基于 IntersectionObserver 异步监听方法,实现无线信息流下拉加载,
<template>
<div id="app">
<!-- 1. 设置容器元素,view-list-->
<div class="view-list">
<!-- 2. 循环一个列表,新数据进行追加,下面增加一个loading条-->
<div class="item" v-for="(item,index) in itemData" :key="index">账号ID:{{index}}</div>
<div class="item" id="loading">加载中</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data(){
return {
itemData:[]
}
},
methods:{
// 获取随机数
getRange(){
let id = new Date().getTime();
return Math.random()*id;
},
// 触发监听回调
loadList(status){
status = status[0];
let isShow = status.isIntersecting;
if(isShow){
console.log("加载中 ---- ");
for(let i = 4;i>=0;i--){
this.itemData.push({id:this.getRange()})
}
}else {
console.log('不加载');
}
}
},
created() {
// 3. 初始化循环渲染的列表
for(let i = 4;i>=0;i--){
this.itemData.push({id:this.getRange()})
}
},
mounted() {
// 4. 挂载时,获取列表的容器元素,然后设置监听
// 使用官方提供的新接口:https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
/**
* callback : 回调函数,可见时 和 不可见时,都触发
* options :配置参数,
* root :根元素,默认是视图
* threshold : 交叉比例。也就是在跟元素出现的比例
*/
// 5. 初始化观察对象
let io = new IntersectionObserver(this.loadList, {});
// 6. 获取被监听元素
let viewList = document.getElementById('loading');
// 7. 在观察对象上,监听 6 中获取的对象
io.observe(viewList);
},
}
</script>
<style>
.view-list{
width: 100%;
height: 500px;
margin:20px 0;
overflow-x: scroll;
background-color: rgba(0, 0, 255, 0.25);
}
.item{
height: 50px;
border:1px gray solid;
margin-bottom: 10px;
}
</style>
原理
const {stop} = useIntersectionObserver(target, fn, options)
1、参数一target表示被监听的DOM元素
2、参数二是回调函数,用于通知监听的动作(回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区)
3、参数三 表示配置选项
stop 是停止观察是否进入或移出可视区域的行为
const { stop } = useIntersectionObserver(
target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象
target,
// isIntersecting 是否进入可视区域,true是进入 false是移出
// observerElement 被观察的dom
([{ isIntersecting }], observerElement) => {
// 在此处可根据isIntersecting来判断,然后做业务
},
)
业务功能场景
基于该方法实现组件的懒加载
第一步:在SRC下封装一个钩子函数,src/hooks/index.js文件夹下;
代码如下:
// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = (apiFn) => {
// target表示组件的最外层div元素
const target = ref(null)
// 懒加载接口返回的数据
const result = ref([])
// 监听组件是否进入可视区
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
// 如果target对应的DOM进入可视区,那么该回调函数就触发
if (isIntersecting) {
// 被监听的DOM进入了可视区:此时调用接口获取数据;停止继续监听
stop()
apiFn().then(data => {
result.value = data.result
})
}
})
// result表示接口懒加载获取的业务数据
// target表示被监听的DOM元素,需要在模板中被ref属性绑定
return { result, target }
}
更多推荐
已为社区贡献2条内容
所有评论(0)