courier_mobile_front/src/pages/components/ScrollRefresh.vue

<template>
    <div class="container" :style="{ height: height, overflowY: 'auto' }" @scroll.passive="getScroll($event)">
        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
            <slot v-bind:list="list"></slot>
            <template v-if="!refreshLoading && list.length > 0">
                <div class="bottom_text" style="margin: 20px;" v-if="loading">
                    加载中...
                </div>
                <div class="bottom_text" style="margin: 20px;" v-else-if="noData">
                    已经到底啦...
                </div>
            </template>
            <template v-if="list.length === 0">
                <div class="bottom_text" style="margin-top: 40px;">数据为空！</div>
            </template>
        </van-pull-refresh>

    </div>
</template>

<script>
export default {
    name: 'ScrollRefresh',
    props: {
        height: {
            required: true,
        },
        params: {
            required: false,
            type: Object,
            default: function () {
                return {}
            }
        },
        request: {
            required: true,
            type: Function,
        },
        defaultLimit: {
            required: false,
            type: Number,
            default: function () {
                return 6
            }
        },
    },
    data(aaa) {
        return {
            noData: false,
            loading: false,
            refreshLoading: false,
            pagination: {
                page: 1,
                limit: this.defaultLimit
            },
            list: []
        };
    },

    mounted() {
        this.loadData()
    },
    methods: {
        // 刷新
        async onRefresh() {
            this.pagination.page = 1;
            this.refreshLoading = true;
            await this.loadData(true)
            this.refreshLoading = false
        },
        getScroll(event) {
            let scrollBottom =
                event.target.scrollHeight -
                event.target.scrollTop -
                event.target.clientHeight;
            // 距离底部20px以内 && 还有数据 && 没有正在加载中
            if (scrollBottom <= 20 && !this.noData && !this.loading) {
                this.pagination.page += 1;
                this.loadData()
            }
        },
        async loadData(isClear) {
            this.loading = true
            let parmas = {
                page: this.pagination.page, //   页数，
                limit: this.pagination.limit, // 条数   
            }
            const res = await this.request({ ...parmas, ...this.params })
            let list = res.data.map((item) => {
                return {
                    ...item,
                }
            })
            if (isClear) {
                this.list = list
            } else {
                this.list.push(...list)
            }

            this.loading = false
            if (this.pagination.page * this.pagination.limit >= res.count) {
                this.noData = true;
            } else {
                this.noData = false;
            }
        }
    },



    watch: {
        params: {
            handler() {
                this.pagination.page = 1;
                this.loadData(true)
            },
            deep: true,
            immediate: false
        }
    },

};
</script>
<style lang="less" scoped>
.bottom_text {
    text-align: center;
    color: #969799;
    font-size: 14px;
}
</style>