vue3中使用@vueuse/core中的图片懒加载案例详解
短信预约 -IT技能 免费直播动态提醒
点击进入vueuse官网
1、首先安装
npm i @vueuse/core
2、新建一个helloworld.js文件,内容如下：
import { useIntersectionObserver } from '@vueuse/core'
import {ref} from "vue";
export const useLazyData = (apiFn) => {
const result = ref([])
const target = ref(null)
// stop 停止观察
const { stop } = useIntersectionObserver(
// 监听的目标元素
target,
([{ isIntersecting }], observerElement) => {
// isIntersecting 是否进入可视区
if (isIntersecting) {
stop()
// 调用API函数获取数据
const aa = apiFn()
console.log('aa', aa)
result.value = aa
// // 调用API函数获取数据
// apiFn().then(data => {
// result.value = data.result
// })
}
},
// 配置选项，相交的比例大于0就触发
{
threshold: 0
}
)
return { result, target }
}
3、再app.vue中导包并使用
<template>
<div>
<div class="up"></div>
<div ref="target" :style="{backgroundColor: bgc}" class="down"></div>
</div>
</template>
<script setup>
import {useLazyData} from "@/helloworld";
import {nextTick, onMounted, ref} from "vue";
let bgc = ref('#000')
// 发送请求的函数
// export const findNew = () => {
// return request('/home/new', 'get')
// }
const qingqiuhanshu = () => {
// 模仿请求
return '#1DC779'
}
const { target, result } = useLazyData(qingqiuhanshu)
bgc = result
</script>
<style lang="less" scoped>
.up{
height: 100vh;
margin-bottom: 20px;
background-color: pink;
}
.down{
height: 50px;
background-color: deeppink;
}
</style>
4、观察效果：会发现当滚轮滑到底部时右边控制台会打印，没滑动到底部则不会打印，同时显示出下边的颜色
到此这篇关于vue3中使用@vueuse/core中的图片懒加载案例详解的文章就介绍到这了,更多相关vue3图片懒加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
