H5如何做页面下拉刷新和上拉加载

这里以vant为例

结构

 <van-pull-refreshv-model="isLoading"success-text="刷新成功"@refresh="onRefresh"><van-liststyle="height:100%"v-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><!-- 内容 --><div class="box3" v-for="(item, index) in orderList" :key="index"><div class="item1">{{item.N?.replace(/[【】[\]]/g, '')}}</div><div class="item2"><div class="text1"><div class="spn"><div >订单编码:</div><div class="sn">{{ item.A || '/'}}</div></div><div class="spn"><div >提交时间:</div><div class="sn">{{ item.B || '/'}}</div></div><div class="spn"><div >当前处理人:</div><div class="sn">{{ item.C || '/'}}</div></div><div class="spn"><div >归档时间:</div><div class="sn">{{ item.D || '/'}}</div></div></div><div class="text2"><img class="spn1" :src="item.E" alt /></div></div></div></van-list></van-pull-refresh>

 

data（）{return{page:1,pageSize:10,loading: true,isLoading: false,finished: false,refreshing: false,}
} //函数
onLoad() {// 开始异步请求数据this.loading = true;// 本次数据更新成功后，将loading设置为falsethis.page+=1this.getData()},onRefresh() {// 清空列表数据this.finished = false;// 重新加载数据// 将 loading 设置为 true，表示处于加载状态this.loading = true;this.isLoading = false;this.onLoad();},
getData(){this.loading = false;获取数据的逻辑}

饿了么也有对应的组件.