亲宝软件园·资讯

展开

Vue无限加载组件实现

kzkz 人气:4

背景

遇到的两个问题:scroll 事件不触发、如何将 loading 状态放在无限加载组件中进行管理。

无限加载组件在展示列表页数据时比较常见。特别是在 H5 列表页中,数据比较多,需要做分页,无限加载组件就是一个非常好的选择。

当列表页数据比较多时,一次性从服务端拿到所有的数据会比较耗时,长时间不展示列表数据,比较影响用户体验。所以对于一般的长列表数据,都会做分页。

首次请求时,只请求第一页数据;当用户上拉即将到达列表底部时,再请求下一页数据,将下一页数据拼接在之前的列表后。

实现功能

使用 vue3 composition API 实现如下功能:

注意:InfinitView 直接子元素高度需要比 InfinitView 组件高,才会触发滚动加载。InfinitView 组件的高度默认为其父元素的 100%。

Props

// 触底距离,当距底部距离小于等于 distance 时,会触发加载函数
distance: {
  type: Number,
  default: 30,
},
// 加载函数,触底时执行
onload: {
  type: Function,
  default: async () => {},
},
// 行内样式,在外部可以通过 classStyle 改变 InfinitView 组件的样式
classStyle: {
  type: Object,
  default: () => ({}),
},

使用

直接将 InfiniteView 组件包裹在列表项外面即可:

<InfiniteView :onload="onload">
  <div v-for="item in list">
    {{ item }}
  </div>
</InfiniteView>

使用 setTimeout 模拟列表数据的加载:

// nextPage 表示下一次请求哪一页的数据
const nextPage = ref(1);
// list 表示数据列表
const list = ref(new Array(30).fill(0));

const onload = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      list.value.push(...new Array(50).fill(0).map((_, i) => i + 1 + (nextPage.value - 1) * 50));
      nextPage.value++;
      resolve(nextPage.value);
    }, 200);
  });
}

使用时需要注意:InfinitView 组件的高度默认为其父元素的 100%,如果其父元素高度不确定(例如:由子元素撑开),会导致 InfinitView 无法监听到滚动事件,也就不会触发 onload 函数(后面会解释原因)。

解决方案有两种

注意:这里的可计算高度可以是:由 flex 弹性容器计算得来,但不能由子元素(InfinitView)撑开得来。

组件实现

组件的实现非常简单,InfinitView 组件实际上就是一个 div,只不过在 InfinitView 内部监听了该 div 的滚动事件。在即将触底的时候去调用从父组件中传过来的 onload 函数。

其 template 实现如下:

<div
  class="infinite-view"
  :style="classStyle"
  @scroll="onScroll($event.target)"
>
  <slot />
</div>

其 style 样式如下:

.infinite-view {
  height: 100%;
  overflow-y: scroll;
}

InfinitView 组件的高度由其父元素决定,默认为其父元素高度的 100%,这就限制了其父元素的高度不能由 InfinitView 撑开决定。

其 script 如下:

import { ref, defineProps } from 'vue';

const props = defineProps({
  distance: {
    type: Number,
    default: 30,
  },
  onload: {
    type: Function,
    default: async () => {},
  },
  classStyle: {
    type: Object,
    default: () => ({}),
  },
});

const isloading = ref(false);

const onScroll = async (element) => {
  if (isloading.value) {
    return;
  }
  if (element.scrollHeight <= element.scrollTop + element.offsetHeight + props.distance) {
    try {
      isloading.value = true;
      await props.onload();
      isloading.value = false;
    } catch (error) {
      console.log(error);
      isloading.value = false;
    }
  }
}

scrollHeight === scrollTop + clientHeight 时,刚好滑动到底部。一般情况下,我们可以提前加载,设置一个缓冲距离 distance,当即将滑动到底部,距底部不足 distance 的距离时,就可以触发加载函数。

加载函数 onload 一般是异步函数,用来请求列表数据。在执行 onload 函数之前,将 isloading 设为 true,表示正在加载中;当 onload 函数执行完之后,将 isloading 设为 false,表示加载状态结束。

我们知道,scroll 事件是会频繁触发的,只要列表在滚动,onScroll 函数就会一直执行。

这就有可能导致:当滑动至距离底部不足 distance 距离时,满足触底条件,列表还在持续滚动,此时就会持续执行 onload 函数发送请求,即使上一次请求还没回来,浏览器也会持续请求同一页列表数据

所以需要实现节流加载,控制 onload 函数的执行频率。如果上一次请求还没回来,则不执行 onload 函数。也就是在触底条件之前,如果上一次请求还在加载中,直接 return 掉。

const onScroll = async (element) => {
  // 如果上一次请求还没回来,直接 return
  if (isloading.value) {
    return;
  }
  if (element.scrollHeight <= element.scrollTop + element.offsetHeight + props.distance) {
    try {
      // 在请求之前将 isloading 置为 true
      isloading.value = true;
      await props.onload();
      // 请求成功之后将 isloading 置为 false
      isloading.value = false;
    } catch (error) {
      console.log(error);
      // 请求失败之后也将 isloading 置为 false
      isloading.value = false;
    }
  }
}

实现的时候有两个细节需要提一下:scroll 事件不触发、如何将 loading 状态放在无限加载组件中进行管理。

scroll 事件

有时候经常会遇到屏幕在滚动,但是一直没有触发 scroll 事件。那是因为虽然屏幕滚动了,但是监听 scroll 事件的 div 并没有滚动。

当然我们可以省事地为 window 设置监听 scroll 的事件,不管是哪个元素触发的 scroll 事件,最终都会冒泡到 window 上面,设置的 scroll 回调函数也总是会执行。

// 在 InfinitView 中,组件挂载之后,为 window 设置监听 scroll 的事件
onMounted(() => {
  window.addEventListener('scroll', (e) => {
    onScroll(e.target);
  })
})

上面的代码在 InfinitView 组件中,为 window 设置了监听 scroll 的事件。当屏幕滚动时,就会执行 onScroll 函数。这样也是没问题的,确实可以解决 scroll 事件不触发的问题。

但是我们并没有找到问题的根源,为什么在 InfinitView 组件中的 div 上面监听的 scroll 事件,却不会触发?

首先得知道什么情况下才会触发滚动事件

只有满足了以上两个条件,才会触发父元素的 scroll 事件。很多时候,某个 div 的 scroll 事件没有触发,是因为我们没有设置该 div 的高度,它的高度由子元素撑开,和子元素高度之和相等。

这样即使屏幕在滚动,触发的也不是它的 scroll 事件,而是更上层 div 的 scroll 事件。例如:如果某个 div 的高度由子元素撑开,并且其父元素高度确定,比它的高度小,则在滚动的时候,不会触发该 div 的 scroll 事件,会触发它的父元素的 scroll 事件。

或者我们忘记设置监听 scroll 事件的元素的 overflow 属性了,默认情况下,overflow 的值为 visible。

$emit 发射事件和 props 回调函数的区别

我们知道在 Vue 中,子组件向父组件通信有两种方式:通过 $emit 发射事件、通过调用父组件中传过来的回调函数。

这两种方式都可以由子组件向父组件通信,但是也有一些细微的区别:

看起来,好像使用 props 回调函数比 $emit 发射事件要更好,那是不是 $emit 发射事件就没有好处了呢?

也不是。从名字就可以看出,$emit 发射事件,是从子组件中发射一个事件给父组件,父组件在监听到子组件发射的事件之后,可以进行一系列的操作。它只是给父组件发射一个事件,传递一个信号给父组件,父组件接收到这个信号之后,接下来要怎么做还是由父组件决定。但是使用 props 回调函数的方式则不同,它是将父组件中的一个函数通过 props 传给子组件,子组件拿到这个回调函数之后,要怎么执行,完全取决于子组件。所以子组件可以知道回调函数什么时候执行完,也可以拿到回调函数的返回值。

了解了这两种通信方式的区别,就解决了如何将 loading 状态放在无限加载组件中进行管理。

因为需要将 loading 状态放在无限加载组件(子组件)中进行管理,所以无限加载组件(子组件)必须要知道请求什么时候回来,也就是 onload 异步函数什么时候执行完。

这样我们就可以用 props 回调函数的形式,将父组件中的异步请求函数传给子组件,当列表即将滚动到底部时,将 loading 状态置为 true,然后发送请求,当请求回来之后,异步函数执行完,再将 loading 状态置为 false。如果请求没有回来,loading 状态为 true,即使再次触发了 scroll 事件,也直接返回,不再继续发送请求。

const onScroll = async (element) => {
  // 如果上一次请求还没回来,直接 return
  if (isloading.value) {
    return;
  }
  if (element.scrollHeight <= element.scrollTop + element.offsetHeight + props.distance) {
    try {
      // 在请求之前将 isloading 置为 true
      isloading.value = true;
      await props.onload();
      // 请求成功之后将 isloading 置为 false
      isloading.value = false;
    } catch (error) {
      console.log(error);
      // 请求失败之后也将 isloading 置为 false
      isloading.value = false;
    }
  }
}

总结

加载全部内容

相关教程
猜你喜欢
用户评论