自定义列表触底加载

自定义列表，在页面滚动到底部后自动添加新的一页内容到当前列表后面。

子组件

<template>
    <div class="left">
        <div class="table">
            <div class="table-header">
                <div class="table-header-item-title">序号</div>
                <div class="table-header-item-title">任务名称</div>
                <div class="table-header-item-title">责任单位</div>
            </div>
            <div>
                <div style="max-height: 5rem;overflow-y: scroll" @scroll="handleScroll($event)" v-loading="load"
                     v-if="arrData && arrData.length > 0">
                    <div class="table-bodySuccess" v-for="(item, index) in arrData"
                         :key="index" :style="{ background: successBgColor(index), }">
                        <div class="table-body-item-title">
                            {{ index + 1 }}
                        </div>
                        <el-tooltip class="item" effect="dark" :content="item.task " placement="top">
                            <div class="table-body-item-title text-ellipsis">{{ item.task }}</div>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="item.company " placement="top">
                            <div class="table-body-item-title text-ellipsis">{{ item.company }}</div>
                        </el-tooltip>
                    </div>
                    <van-divider v-if="!loadFal">到底了</van-divider>
                    <van-loading type="spinner" size="24px" v-if="loadFal" style="text-align: center"/>
                </div>
                <div v-else>
                    <van-empty description="暂无内容"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                errData: [],
                pageSize: 10,
                currentPage: 1,
                load: false,
                arrData: [],
                loadFal: false
            }
        },
        props: {
            pagination: {
                type: Function,
                default: null
            },
            successData: {}
        },
        computed: {
            //背景为斑马纹
            successBgColor: function () {
                return function (index) {
                    if (this.errData.length % 2 === 0) {
                        if (index % 2 === 0) {
                            return 'rgb(233 232 255)'
                        } else {
                            return '#ffffff'
                        }
                    } else {
                        if (index % 2 === 0) {
                            return '#ffffff'
                        } else {
                            return 'rgb(233 232 255)'
                        }
                    }
                }
            },
            // 滚动层高度
            scrollWrapHeight: function () {
                // left高度 - table-header高度 - table-bodyError高度 * 个数
                return 600 - 52 - this.errData.length * 52
            },
     
        },
        watch: {
        //接口得到的数据，父组件传给子组件，由于可能会比页面渲染慢，所以需写在watch里面才不会导致没有数据
            successData(val, old) {
                setTimeout(() => {
                    if (val) {
                        this.getData()
                    }
                }, 0)
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                //调用父组件的方法
                this.arrData = this.pagination(this.pageSize, this.currentPage, this.successData)
                this.loadFal = false
            },
            // 获取页面滚动距离
            handleScroll(e) {
                let el = e.target
                //判断当前是否为加载状态
                if (this.loadFal) {
                    return;
                }
        //判断是否到达div容器底部
                if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
                    this.loadFal = true
                    //控制页数
                    if (this.pageSize > this.successData.length) {
                        this.loadFal = false
                        return
                    }
                    this.pageSize = this.pageSize + 10
                    this.currentPage = this.currentPage + 1
                    // this.load = true
                    //调用后台接口
                    setTimeout(() => {
                        this.getData()
                        // this.load = false

                    }, 1000)

                }
            },

        }
    }
</script>

<style scoped>
    .text-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
    }
</style>
<style lang="less" scoped>
    .left {
        width: 100%;
        /*height: 6rem;*/
        /*background-color: #fab4b4;*/
        /*border-bottom: 1px solid red;*/
        position: relative;

        .table-header {
            width: 100%;
            background-color: #b9bbd2;
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 700;
            display: flex;

            div:nth-child(1) {
                /*flex: 1;*/
                text-align: center;
            }

            .table-header-item-title {
                height: 52px;
                width: 100%;
                text-align: left;
                line-height: 1.5rem;
                flex: 2;
                /*display: flex;*/
                /*justify-content: center;*/
                /*align-items: center;*/
            }
        }

        .table-bodyError,
        .table-bodySuccess {
            width: 100%;
            /*color: red;*/
            font-size: 16px;
            display: flex;

            div:nth-child(1) {
                /*flex: 1;*/
                text-align: center;
            }

            /*div:nth-child(2){*/
            /*   */
            /*}*/
            /*div:nth-child(3){*/
            /*    flex: 2;*/
            /*}*/

            .table-body-item-title {
                width: 100%;
                height: 52px;
                text-align: left;
                line-height: 1.5rem;
                flex: 2;
                /*display: flex;*/
                /*justify-content: center;*/
                /*align-items: center;*/

                .circle {
                    width: 12px;
                    height: 12px;
                    background: #ea4141;
                    border-radius: 50%;
                }
            }
        }

        .table-bodySuccess {
            color: #000;

            .table-body-item-title {
                .circle {
                    background: #29b153;
                }
            }
        }

        .scrollWrap::-webkit-scrollbar {
            width: 0 !important;
        }

        .scroll {
            animation: scrollData 10s infinite linear;
        }

        @keyframes scrollData {
            from {
                transform: translateY(0px);
            }
            to {
                transform: translateY(-100%);
            }
        }
    }
</style>

父组件（分页加载）

 <my-table :success-data="workList" :pagination="pagination"></my-table>

 pagination(pageSize, currentPage, arr) {
                // console.log(pageSize,currentPage)
                // pageSize：一页的总数
                // currentPage：当前的页数
                // skipNum：跳过的数量
                // arr：数组
                var skipNum = ''
                var newArr = (skipNum + pageSize >= arr.length) ? arr.slice(skipNum, arr.length) : arr.slice(skipNum, skipNum + pageSize);
                return newArr;
            },