van-list中数据加载先后顺序，你真的搞明白了吗？

前言

目前在做一个使用vant组件库开发的H5的项目，在一个数据列表页时用到了van-list组件，在数据较少的时候（数据没有达到自己设定的pageSize的最大限制），项目还是正常在运行；但是当数据超过了每页限制的最大字数，数据加载的顺序并没有按照既定的要求去加载数据，我第一时间去看了van-list组件的API，但是并没有得到答案

###

问题描述

当页面中间存在多个tab的时候，在多个tab之间来回切换的时候，当从甲tab切换到乙tab的时候，会调用两次接口，可能就会导致第二页的数据比第一页加载完成的要早，并且直接渲染到了页面上，导致concat合并两次数据展示的时候，数据展示的先后数据就可能会发生混乱

###

出现的原因

因为触发了created钩子还触发了van-list的onLoad事件，在进入到created钩子的时候就调用了一次接口，且调用的位置在.then({})之前，而此时异步回调的参数还没有返回回来，又会去触发onLoad事件，导致直接加载了两页的数据。

#

先了解一下van-list组件身上一些比较重要的API

### 1.基础用法

list组件控制加载状态是通过loading和finished来完成的，当组件滚动到底部的时候，会触发load事件，并将loading设置为true，并去异步的加载数据。数据请求回来之后，再将loading设置为true即可。若所有的数据都加载完毕了，直接将finished设置为true就好了。

### 2.List 的运行机制是什么？

List 会监听浏览器的滚动事件并计算列表的位置，当列表底部与可视区域的距离小于offset时，List会触发一次 load 事件。

### 3.为什么 List 初始化后会立即触发 load 事件？

List 初始化后会触发一次 load事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。

### 4.为什么会连续触发 load 事件？

如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。

#### 5.loading 和 finished 分别是什么含义？

**List有以下三种状态，理解这些状态有助于你正确地使用List组件：

非加载中，loading为false，此时会根据列表滚动位置判断是否触发onload事件（列表内容不足一屏幕时，会直接触发）

加载中，loading为true，表示正在发送异步请求，此时不会触发onload事件

加载完成，finished为true，此时不会触发onload事件 在每次请求完毕后，需要手动将loading设置为false，表示加载结束**

## 解决方案

这次遇到的问题，可以利用第五点，解决方法：

在进入created的发送请求之前，将this.loading = true , ⇒⇒⇒ (利用：加载中，loading为true，表示正在发送异步请求，此时不会触发load事件)，让系统知道此时正在异步请求数据，让它别触发onload事件