vue+element ui 滚动加载，vue瀑布流加载
源码技巧4年前 (2021-02-24)25511
<div id="app">
<div class="infinite-list-wrapper" style="overflow:auto">
<ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
<li v-for="news in newsList" class="list-item">{{ news.newsTitle }}</li>
</ul>
<el-row style="height: 50px" 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>
</div><style>
.infinite-list-wrapper {
width: 100%;
height: 300px;
border: 1px solid rebeccapurple;
}
.list {
width: 100%;
}
.list li {
height: 30px;
margin: 5px 0;
background: #8c939d;
list-style: decimal;
}
.infinite-list-wrapper p {
text-align: center;
}
</style><script>
(function () {
const vm = new Vue({
el:"#app",
data(){
return {
loading: false,
newsList:[],
pages:1,
currentPage:1
}
},
computed: {
noMore() {
return this.currentPage>=this.pages;
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load() {
this.loading = true;
axios.get("/news/get",{
params: {
pageNum: vm.currentPage+1,
pageSize:10
}
}).then(function (response) {
let pageInfo = response.data;
console.log(pageInfo);
pageInfo.data.forEach(function (item) {
vm.newsList.push(item);
});
vm.currentPage = pageInfo.current;
vm.loading = false;
}).catch(function (error) {
console.log(error);
})
}
},
created(){
axios.get("/news/get", {
params: {
pageNum: 1,
pageSize: 10
}
}).then(function (response) {
let pageInfo = response.data;
console.log(pageInfo);
pageInfo.data.forEach(function (item) {
vm.newsList.push(item);
});
vm.pages = pageInfo.pages;
}).catch(function (error) {
console.log(error);
})
}
})
})();</script>
