2021-09-07

简介

这篇文章主要介绍了vue+element ui 滚动加载(示例代码)以及相关的经验技巧

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML

<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>

二、css

<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>

三. js

代码如下（示例）：

<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>