vue+element ui 滚动加载
Posted xiaogblog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element ui 滚动加载相关的知识,希望对你有一定的参考价值。
<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>
以上是关于vue+element ui 滚动加载的主要内容,如果未能解决你的问题,请参考以下文章