~~~
<template>
<view>
<!-- 导航 -->
<uni-nav-bar statusBar title="页面" left-icon="left" fixed></uni-nav-bar>
<!-- 列表(这里需要注意必须要写一个px的固定高度，不然无法触发上拉事件) -->
<scroll-view style="height:500px" scroll-y @scrolltolower="loadMore">
<!-- 列表 item -->
<view class="item" v-for="(item, index) in invoiceList" :key="index">
<view class="title">{{ item.title }}</view>
</view>
<!-- 上拉加载底部文字组件 -->
<uni-load-more v-if="invoiceList.length === 0 || invoiceList.length > 9" :contentText="contentTextObj" :status="loading" />
</scroll-view>
</view>
</template>
<script>
// 引入组件
import uniLoadMore from '@/components/uni-load-more/uni-load-more';
// 接口
import invoiceApi from '@/api/deduction';
export default {
name: 'demo',
components: {
uniLoadMore
},
data() {
return {
page: { // 分页配置
pageNo: 1,
pageSize: 10
},
invoiceList: [], // 发票列表
loading: 'loading', // 默认显示【加载中】
contentTextObj: { // 加载文字配置对象
contentnomore: '您已到底了~'
}
};
},
created() {
// 初始化获取列表
this.getList();
},
methods: {
// 上拉加载事件
loadMore() {
// 无数据时 return
if (this.loading === 'noMore') return;
this.page.pageNo++;
this.getList();
},
// 获取列表
async getList() {
try {
// 参数
const params = {
data: {
orgId: this.currentCompany.orgId, // 当前组织 id
source: '1', // 1发票池 2发票签收 3勾选认证列表 4认证发票清单列表 5认证记录（勾选）6认证记录（暂不抵扣）7勾选认证智能匹配 8异常发票9：发票池异常发票查询
kprqStart: this.kprqStart, // 开票日期（开始）
kprqEnd: this.kprqEnd // 开票日期（结束）
},
...this.page
};
// 调用接口
const res = await invoiceApi.getInvoiceList(params);
// 解构数据
const { data } = res;
// 发票数据列表
const list = data.list || [];
// 无数据
if (list.length === 0) {
// 无数据时关闭
this.loading = 'noMore';
}
// 每次请求到值，将新值与push到后面
this.invoiceList = [...this.invoiceList, ...list];
} catch (e) {
console.warn(err);
uni.showToast({
title: '获取发票列表数据失败',
icon: 'none'
});
}
}
}
};
</script>
~~~
