YXGJ/components/My_listbox.vue

<template>
    <view class="container" :style="{ background: boxBackground }">
        <view id="mylisttop" />
        <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
            :style="{ height: (defaultHeight - 0 || height - 0) + 'px' }" :triggered='true'
            @refresherrefresh='pullToRefresh' :scroll-into-view="scrollIntoView" :lower-threshold='300'
            :scroll-with-animation="true" @scrolltolower='loadThePage'>
            <view v-if="isShowEmpty && empty"
                style="display: flex;align-items: center;width: 100vw;justify-content: center;"
                :style="{ height: (defaultHeight - 0 || height - 0) + 'px' }">
                <view :style="{ marginTop: '-' + tovw(bottomHeight) }">
                    <u-empty :mode="mode" text="暂无数据" />
                </view>
            </view>
            <block v-else>
                <view id="header">
                    <slot />
                </view>
                <view id="bottom" />
                <view v-if="pagingText" class="paging">
                    {{ pagingText }}
                </view>
                <u-divider v-if="bottomTips" text="已经到底部" :dashed="true" />
                <view v-if="bottomHeight" :style="{ height: tovw(bottomHeight) }" />
            </block>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: 'My_listbox',
    props: {
        getlist: Function,
        automatic: {
            type: Boolean,
            default: true
        },
        mode: {
            type: String,
            default: "data"
        },
        pullDown: {
            type: Boolean,
            default: true
        },
        boxBackground: {
            type: String,
            default: ""
        },
        defaultHeight: {
            type: [String, Number],
            default: 0
        },
        isShowEmpty: {
            type: Boolean,
            default: true
        },
        bottomHeight: {
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            inRefresh: false, //下拉开启自定义项
            height: 0,
            scrollIntoView: "",
            pagingText: "",
            bottomTips: false,
            empty: false
        };
    },
    mounted() {
        if (this.automatic) setTimeout(() => {
            this.setHeight()
        }, 100);
    },
    methods: {
        /* 下拉刷新 */
        pullToRefresh() {
            this.inRefresh = true
            this.$emit("getlist", true)
        },
        /* 刷新完成 */
        RefreshToComplete() {
            setTimeout(() => {
                this.inRefresh = false
            }, 500)
        },
        /* 加载分页 */
        loadThePage() {
            this.$emit("getlist", false)
        },
        /* 设置组件高度 */
        setHeight(mode, num) {
            return new Promise((resolve) => {
                this.getHeight("#mylisttop", this).then(res => {
                    let height = res;
                    switch (mode) {
                        case 'add':
                            height = (res - 0) + (num - 0);
                            break;
                        case 'minus':
                            height = res - num;
                            break;
                    }
                    if (this.height != height) this.height = height;
                    resolve(height)
                });
            })
        },
        /* 分页 */
        paging(data, res, update = false) {
            let content = JSON.parse(JSON.stringify(data))
            content.pageNumber = res.pageNumber + 1;
            content.pageTotal = res.pageTotal;
            // this.pagingText = content.pageNumber + ' / ' + content.pageTotal;
            if (!update) this.bottomTips = res.total != 0 && content.pageNumber >= content.pageTotal;
            if (this.isShowEmpty) this.empty = res.total == 0;
            return content;
        }
    },
}
</script>

<style lang="scss" scoped>
.scroll-view {
    position: relative;

    .paging {
        width: 100vw;
        text-align: center;
        position: absolute;
        bottom: 15px;
    }
}
</style>