考慮到項(xiàng)目中一些列表信息库快，全部顯示會(huì)導(dǎo)致加載緩慢，故而實(shí)現(xiàn)分頁(yè)顯示，利用
v-infinite-scroll滾到到底部江解，觸發(fā)分頁(yè)查詢
<template>
<div>
<div class="infinite-list-wrapper" style="overflow: auto">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled"
>
<li v-for="item in satelliteList" class="list-item" :key="item.id">
{{ item.name }}
</li>
</ul>
<p v-if="loading">加載中...</p>
<p v-if="noMore">沒(méi)有更多了</p>
</div>
</div>
</template>
<script>
import { satelliteGetPagedSatellites } from "@/api/api.js";
export default {
name: "",
components: {},
props: {},
data() {
return {
loading: false,
condition: {
pageNo: 1,
pageSize: 10,
},
satelliteList: [],
totalNumber: 0,
totalPages: 0,
};
},
computed: {
noMore() {
return this.satelliteList.length > this.totalNumber;
},
disabled() {
return this.loading || this.noMore;
},
},
watch: {},
mounted() {
this.init();
},
methods: {
init() {
this.loading = false;
this.condition.pageNo = 1;
this.satelliteList = [];
this.totalNumber = 0;
this.totalPages = 0;
},
load() {
this.loading = true;
this.getPagedSatellites();
},
async getPagedSatellites() {
let pInfo = await satelliteGetPagedSatellites(this.condition);
pInfo.data.data.content.forEach((item) => {
this.satelliteList.push({
id: item.satelliteId,
name: item.satelliteCname,
});
});
this.totalNumber = pInfo.data.data.totalElements;
this.totalPages = pInfo.data.data.totalPages;
this.loading = false;
if (this.condition.pageNo>this.totalPages) {
return;
}
this.condition.pageNo++;
},
},
};
</script>
<style lang="scss" scoped>
.infinite-list-wrapper {
position: absolute;
width: 220px;
height: 300px;
top: 200px;
background: white;
margin-left: 30px;
}
.list {
list-style: none;
}
</style>
