基于vant实现H5列表的上拉分页及下拉刷新功能总结

基于vant实现H5列表的上拉分页及下拉刷新功能总结

1.业务需求：

• 最近在做一个vue的H5项目，目前遇到一个需求是在一个list列表上由于数据量较大，所以要分页实现数据的加载，即根据用户的滑动，依次加载出不同页数的数据，并且要实现下拉刷新当前数据。这里我主要分享如何通过接口请求来实现列表的分页与刷新，下面是我做的一个模版，可以直接copy。

2.解决方案：

• 第一部分，HTML模版（refreshing：控制刷新，loading：控制加载，finished：控制是否完成；注意：声明上述变量的时候初始值都为false）：

• 	 <van-pull-refresh v-model="refreshing" @refresh