zoukankan      html  css  js  c++  java
  • 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>     
  • 相关阅读:
    Postman:Pre-request Script
    PHP修改脚本最大执行时间和最大内存限制
    PHP函数:array_chunk
    PHP出现SSL certificate:unable to get local issuer certificate的解决办法
    Linux命令:chown
    PHP函数:fopen
    PHP常量:JSON_UNESCAPED_UNICODE
    Android -- 贝塞尔曲线公式的推导和简单使用
    Java -- 浅入Java反射机制
    Java -- 深入浅出GC自动回收机制
  • 原文地址:https://www.cnblogs.com/xiaogblog/p/11659837.html
Copyright © 2011-2022 走看看