H5搭配Vant实现列表页的下拉刷新和上拉加载功能

最新项目中使用混合开发，要用到h5，其中包括列表页的功能，所以来总结一下实现方式：

template代码如下：

<van-pull-refresh class="sh_pullRefresh" v-model="options.isPullLoading" @refresh="onRefresh">
	<template v-if="!options.isLoading">
		<van-list
			v-if="tableData.length"
			v-model="options.upLoading"
			:finished="options.upFinished"
			finished-text="没有更多了"
			@load="onScrollToLower"
			>
			<goodsList :tableData="tableData" @onClickQuote="onClickQuote"></goodsList>
		</van-list>
		
		
		<div class="sh_none" v-else>
			<img src="~@/assets/img/notice_none.png" />
			<span>暂无商品询价</span>
		</div>
	</template>
</van-pull-refresh>

@refresh — —下拉刷新事件
@load — — 上拉加载翻页事件
finished — — 数据全部加载完 显示
finished-text loading — — 显示加载中

 data中代码如下：

options: {
	isLoading: false, // 是否正在加载中, 下拉刷新
	isPullLoading: false, // 下拉刷新
	upLoading: false, // 上拉加载
	upFinished: false, // 上拉加载完成
},
tableData: [],

methods代码如下：

methods: {
    // 初始化
    init() {
		this.tableData = [];
		this.onRequestTable(true);
	},
    // 获取数据
	async onRequestTable(isLoading = false) {
		if (isLoading) { // 控制是否在首次加载或者下拉刷新
			this.$set(this.options, 'isLoading', true);
		} else {
			this.$set(this.options, 'isLoading', false);
		}
		let { data } = await queryEnquiryList(params);
		if (data.status === "200") {
			if (data.data.list.length != 0) {
				if (data.data.list.length < this.params.limit) {
					this.$set(this.params, 'moreList', false);
					this.$set(this.options, 'upFinished', true);
				}
				this.tableData = [...this.tableData, ...data.data.list];
				this.$set(this.params, 'page', data.data.currPage);
			} else {
				this.$set(this.params, 'moreList', false);
				this.$set(this.options, 'upFinished', true);
			}
		}
		this.$set(this.options, 'isLoading', false);
	},
    // 数组重置
	onResetList() {
		this.tableData = [];
		this.$set(this.params, 'moreList', true);
		this.$set(this.params, 'page', 1);
		this.$set(this.options, 'upFinished', false);
	},
	// 下拉刷新
	async onRefresh() {
		this.$set(this.options, 'isPullLoading', true);
		this.onResetList();
		await this.onRequestTable(true);
		this.$set(this.options, 'isPullLoading', false);
	},
	// 上拉加载
	async onScrollToLower() {
		this.$set(this.options, 'upLoading', true);
		++this.params.page
		if (this.params.moreList) {
			await this.onRequestTable();
		}
		this.$set(this.options, 'upLoading', false);
	},
}