最新项目中使用混合开发，要用到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);
},
}
