一、介绍：
瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
二、基础用法：
List 组件通过loading和 finished两个变量控制加载状态，当组件滚动到底部时，会触发 load事件并将loading 设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将finished 设置成 true 即可。
html
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<div v-for="(item, index) in list" :key="index" class="dataItem">
<p class="title">
{{ item.real_name ? item.real_name + "\xa0" : ""
}}{{ item.username }}
</p>
<div class="num">
<div class="register">
<span>卡名称 </span>
<p class="register_num">{{ item.name ? item.name : "暂无" }}</p>
</div>
<div class="register">
<span>购买金额 </span>
<p class="recharge_num">
{{ item.money ? item.money : "暂无" }}
</p>
</div>
<div class="register">
<span>订单状态</span>
<p
class="withdrawal_num"
:class="{
green: item.earn_profit_type == '10',
yellow:
item.earn_profit_type == '11' ||
item.earn_profit_type == '12',
red: item.earn_profit_type === null
}"
>
{{ filterStatus(item.earn_profit_type) }}
</p>
</div>
</div>
</div>
</van-list>js：组件引入注册再使用
<script>
import indexApi from "@/api/index.js";
import { List } from "vant";
export default {
data() {
return {
buy_total_number: "",
quit_total_number: "",
notbuy_total_number: "",
buy_total_money: "",
list: [],
loading: false,
finished: false,
page: 1
};
},
methods: {
getList() {
this.loading = true;
indexApi["XXXXXXXX"]({
token: this.$route.query.token,
p: this.page
})
.then(res => {
console.log(res);
this.loading = false;
if (res.data.flag == 1) {
console.log("请求成功");
//先给列表上方固定的黑框那四个变量赋值
var resData = res.data.info; //这里变量不能用res，会和接口返回的res重复
if (this.buy_total_number == "") { //通过打印发现有报错信息buy_total_number为undfined，然后发现只有第一次请求时候才会有data数据，也就是上面四个数据，所以做一个判断，没有值的时候给四个数据赋值
this.buy_total_number = resData.data.buy_total_number;
this.quit_total_number = resData.data.quit_total_number;
this.notbuy_total_number = resData.data.notbuy_total_number;
this.buy_total_money = resData.data.buy_total_money;
}
if (resData.list.length > 0) { //从这里是重点！！！
//如果list有数据，就需要把接口返回的list数组拼接到this.list
this.list = this.list.concat(resData.list); //追加数据,数组会越来越大
this.page = this.page + 1; //继续加载下一页,vant组件自带的拉到底部继续请求接口
} else {
this.loading = false;
this.finished = true;
}
} else {
this.loading = false;
this.$toast.fail(res.data.msg);
}
})
.catch(error => {
this.loading = false;
console.log(error);
});
},
filterStatus(val) {
if (val == "10") {
return "已购买";
} else if (val == "11" || val == "12") {
return "退货中";
} else {
return "未购买";
}
}
},
mounted() {},
components: {
VanList: List
}
};
</script>三、总结归纳 重点来了
1. if判断如果接口返回的list有数据，就需要把接口返回的list数组拼接到this.list，
2. 追加数据,数组会越来越大
3. this.page = this.page + 1; 继续加载下一页，vant自带的当组件滚动到底部时，会触发load事件
4. 直到接口返回的list数组为空， 把this.finished = true; 显示没有更多了
5. tab切换时候或者切换筛选条件必须要把初始化页数page，总页数totalpage；列表数据 清空= [ ]；this.loading = false；this.finished = false；重置
四、过程中遇到的问题：
vant list组件滑动时不断请求接口
一开始的时候没有加if (this.buy_total_number == ""){ }这个条件，卡在这不走了，导致page一直都是2，再就是因为我一直向下滑动触发load事件，所以接口一直在请求，请求了很多次，陷入了死循环；
后来看到了这个报错，看了下打印的数据，当page >1 的时候，没有返回这四个值所以判断，只要已经获取过了，就不再重复获取了。
五、展示长列表另一种解决办法
比方法一优势是：
这种方法先判断判断当前页数 和总页数，当前页数>=总页数时，直接 this.finished = true; 显示没有更多了，就不继续请求接口了，节省网络资源，不会跟方法一加载到最后一页有数据继续执行this.page = this.page + 1; 最后打印list是空数组， 因为一开始没加限制条件导致又去请求了一次接口。
js：
data() {
return {
buy_total_number: "",
quit_total_number: "",
notbuy_total_number: "",
buy_total_money: "",
list: [],
loading: false,
finished: false,
page: 1,
totalPage: 2 //加了个总页数变量，自定义个比page大的数字，否则会直接this.finished = true;
};
},
getList() {
this.loading = true;
//判断当前页数 和总页数
if (this.page >= this.totalPage) {
this.finished = true;
} else {
this.onLoad();
}
},
onLoad() {
indexApi[XXXXXXXXX"]({
token: this.$route.query.token,
p: this.page
})
.then(res => {
console.log(res);
if (res.data.flag == 1) {
console.log("请求成功");
// 加载状态结束
this.loading = false;
var resData = res.data.info;
// 当page >1 的时候，没有返回这四个值
//所以判断，只要已经获取过了，就不再重复获取了
if (this.buy_total_number == "") {
this.buy_total_number = resData.data.buy_total_number;
this.quit_total_number = resData.data.quit_total_number;
this.notbuy_total_number = resData.data.notbuy_total_number;
this.buy_total_money = resData.data.buy_total_money;
}
this.totalPage = resData.totalPages;
if (resData.list.length > 0) {
this.list = this.list.concat(resData.list); //追加数据
console.log("增加page前");
console.log(this.page);
this.page = this.page + 1;
console.log("增加page后");
console.log(this.page);
} else {
this.finished = true;
}
} else {
this.$toast.fail(res.data.msg);
}
})
.catch(error => {
console.log(error);
});
},五、看文档防踩坑
再记录下vant list组件使用中官方文档给的常见问题，防止踩坑，以备不时之需哈哈哈哈~
