在使用vant List列表组件开发时，遇到一个坑就是接口重复加载，导致这个bug的原因是， 滚动到底部时会自动触发onload，在切换条件时，重置数据为空后也会触发滚动onload事件。因为数据是异步请求回来的，在第一次触发onload后，数据还在路上时，再时触发onlad导致2次ajax请求。
主要需要注意以下几点
是否正确设置this.loading=false;。 （因为每次加载函数执行的时候，this.loading 会自动变为 true， 如果不设置为 false 则不会继续加载）。
需要给van-list增加 :immediate-check=“false” 属性，不要让他首次加载，然后在 created() {} 里面进行首次加载（这样可以放置首次加载出现多次加载的情况）
异步获取到数据后，需要给在元数据的基础上增加数据，可以参考后面的例子代码，注意，要使用 setTimeout(() => {} 并且一定要在 for 循环后立马使用 this.new_loading = false; （这样就不会出现多次加载的情况了）
同页面多个下拉加载的问题，可以针对 加载（loading），完成（finished），页数（page），数据（data_list），加载函数（onLoad） 这五个参数进行多重设置，也就是说，让每一个 vant-list 对应一组 加载（loading），完成（finished），页数（page），数据（data_list），加载函数（onLoad） 这五个参数，然后更新的时候分开更新就行。（我就不写这部分代码了）
数据加载完成后，要使用 this.finished = true; 。(这样可以防止没有数据了，还在继续做异步请求)
参考代码如下：
// 这部分是 van-lit 的代码
<van-list v-model="new_loading"
:finished="new_finished"
finished-text="没有更多了"
:immediate-check="false"
@load="onLoadNew">
<ul class="goods_list_box van-clearfix">
<li v-for="item in new_goods"
:key="item.id">
// 这里面是内容列表的代码
</li>
</ul>
</van-list>
<##script>
// 这里面是script的部分代码，注意：不是全部代码
data() {
return {
new_goods: [], // 新商品列表
new_loading: false, // 新商品商品加载中
new_finished: false, // 新商品加载完成
new_page: 1, // 新商品当前页数
};
},
created() {
// 首次加载数据
this.loadGoods("new", 1, 10, "refresh");
},
methods: {
// 加载新商品
onLoadNew() {
// 数量加一
this.new_page += 1;
// 增加商品
this.loadGoods("new", this.new_page, 10, "add");
},
// 添加或者刷新商品（刷新商品和第一次加载商品是一样的）
// loadGoods（类型（这个不用管），页数，每页个数，状态（刷新还是增加））
async loadGoods(type, page, page_num, status) {
// 异步获取数据
let result = await index_goods_list(type, page, page_num);
// 刷新商品（首次加载商品）
if (status == "refresh") {
this.new_goods = result.new_goods;
} else if (status == "add") {
// 这里是增加数据
if (result.new_goods.length == 0) {
// 没有数据的话，加载完成
this.new_finished = true;
} else {
// 这里一定要用 setTimeout(() => {} 来增加数据
setTimeout(() => {
result.new_goods.forEach((element) => {
this.new_goods.push(element);
});
// 注意，for循环完成后，一定要立马 this.new_loading = false;
this.new_loading = false;
}, 1000);
}
}
},
}
##script>
