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 滚动加载的主要内容,如果未能解决你的问题,请参考以下文章

在element-ui的select下拉框加上滚动加载

vue element 菜单滚动

vue2.0无限滚动加载数据插件

Vue element-ui:滚动条 分页 禁用选项

随笔47-在element-ui的select下拉框加上滚动触底事件

element-ui select下拉框滚动加载更多