vue项目中可以通过v-infinite-scroll实现无限加载请求数据。
看看我的代码:
<div
v-infinite-scroll="loadFun"
infinite-scroll-disabled="disabled"
>
<no-data v-if="mediaList.length <= 0"></no-data>
<div
v-else
v-for="(item, idnex) in mediaList"
:key="index"
>
<img :src="item.src" />
</div>
<div v-if="mediaList.length > 0" class="materialMore">
<p v-if="loadingOps.loading">加载中...</p>
<p v-if="loadingOps.noMore">没有更多了</p>
</div>
</duv>
data() {
return {
pagination: {
pageSize: 9,
pageNumber: 1,
total: 10
};
loading: false,
noMore: false,
disabled: false,
mediaList: [
{
id: "243434342342343",
title: "图片01",
src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
},
{
id: "7575645643453454",
title: "图片02",
src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
},
{
id: "4563456236475654",
title: "图片03",
src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
},
{
id: "4563475678567754",
title: "图片04",
src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
},
{
id: "65743634563463456",
title: "图片05",
src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
},
]
}
}
handleLoad() {
this.loading = true;
this.pagination.pageNumber += 1;
this.handleDataForm();
},
getDataList() {
this.disabled = true; // 先置true
//发起请求
getList().then((res) => {
// 请求结束之后加载停止
this.loading = false;
if (res.status == 200 && res.data.code == 200) {
let length = res.data.data.list.length;
if (length > 0) {
res.data.data.list.forEach(item => {
this.mediaList.push(item);
});
this.noMore = false;
this.disabled = false;
if (length < this.pagination.pageSize) {
// length小于每页数时不再加载
this.noMore = true;
this.disabled = true;
}
} else {
this.noMore = true;
this.disabled = true;
}
} else {
this.noMore = true;
this.disabled = true;
}
}
}