最近完成一个手机端的项目,项目需要页面加载时采用页面混动到底部加载页面数据。
于是各种百度加看element UI 完成了一个小demo废话不多说直接上实现的代码。
页面布局数据加载框
<template>
<!--无限加载-->
<div class="infinite-list-wrapper" style="overflow:auto">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<li v-for="i in count" class="list-item">
<img v-bind:src="i.doperationUrl" alt="图片加载失败" style="width: 175px;height: 118px">
</li>
</ul>
<el-row style="height: 60px" v-if="loading"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.3)"></el-row>
<p v-if="noMore">没有更多了</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
count: [],
loading: false,
aaaa: {pageNum: 1, pageSize: 6},
pages: 1,
currentPage: 1
}
},
computed: {
noMore() {
return this.currentPage >= this.pages;
},
disabled() {
return this.loading || this.noMore
}
},
methods: {
load() {
this.loading = true;
this.aaaa.pageNum = this.currentPage + 1;
setTimeout(() => {
axios.post("api/campus-learn-data/findAllByPage", this.aaaa).then(res => {
let pageInfo = res.data.list;
for (var i = 0; i < pageInfo.length; i++) {
this.count.push(pageInfo[i]);
}
this.loading = false;
console.log(this.count);
this.currentPage = res.data.currentPage;
}).catch(function (error) {
console.log(error);
});
}, 1000);
}
},
created() {
axios.post("api/campus-learn-data/findAllByPage", this.aaaa).then(res => {
this.count = res.data.list;
this.pages = res.data.pages;
})
}
}
</script>
css样式
<style scoped>
.infinite-list-wrapper {
width: 100%;
height: 450px;
border: 1px solid rebeccapurple;
}
.list {
width: 100%;
}
.list li {
height: 120px;
width: 170px;
margin: 6px;
background: #8c939d;
list-style: decimal;
display:inline-block;
}
.infinite-list-wrapper p {
text-align: center;
}
</style>
完成后的效果