前言
本文章实现一个触底无限加载的功能,简言之就是当还有数据未加载完毕时,显示正在加载中,全部加载完毕后显示加载已完毕的一个效果。一起来看看如何实现~
一、封装的意义
- 数据较多的时候,滑动滚动条显示加载状态,可以给用户很好的体验
- 代码维护性更好
- 代码可复用
二、如何封装?
需要用到@vueuse/core
中的useIntersectionObserver
,用来判断元素是否出现在可视区
链接:useIntersectionObserver
1. 准备
项目根目录下打开任意终端,执行npm install @vueuse/core@5.3.0
,这里安装的固定版本,各位按需选择
因考虑复用组件,故封装为全局组件,老套路src/components
下新建infinite-loading.vue
文件
代码如下(示例):
<template>
<div class="infinite-loading" ref="container">
<div class="loading" v-if="loading">
<span class="img"></span>
<span class="text">正在加载中...</span>
</div>
<div class="none" v-if="finished">
<