码迷,mamicode.com
首页 > 其他好文 > 详细

vue+element ui 滚动加载

时间:2019-10-12 10:53:17      阅读:846      评论:0      收藏:0      [点我收藏+]

标签:vue   element   response   script   cat   ble   item   param   pageinfo   


<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 滚动加载

标签:vue   element   response   script   cat   ble   item   param   pageinfo   

原文地址:https://www.cnblogs.com/xiaogblog/p/11659837.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!