water_affairs/components/My_listbox.vue

<template>
    <view class="container">
        <view id="mylisttop" />
        <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
            :style="{ height: height + 'px' }" :triggered='true' @refresherrefresh='pullToRefresh' :lower-threshold='300'
            @scrolltolower='loadThePage'>
            <view>
                <slot />
            </view>
            <view v-if="empty">
                <view :style="{ height: tovw(occupyHeight) }" />
                <u-empty :mode="mode" />
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: 'My_listbox',
    props: {
        getlist: Function,
        empty: Boolean,
        mode: {
            type: String,
            default: "data"
        },
        pullDown: {
            type: Boolean,
            default: true
        },
        occupyHeight: {
            type: Number,
            default: 50
        }
    },
    data() {
        return {
            inRefresh: false, //下拉开启自定义项
            height: 0
        };
    },
    methods: {
        /* 下拉刷新 */
        pullToRefresh() {
            this.inRefresh = true
            this.$emit("getlist", true)
        },
        /* 刷新完成 */
        RefreshToComplete() {
            setTimeout(() => {
                this.inRefresh = false
            }, 500)
        },
        /* 加载分页 */
        loadThePage() {
            this.$emit("getlist", false)
        },
        /* 设置组件高度 */
        setHeight(mode, num) {
            this.getHeight("#mylisttop", this).then(res => {
                let height = res;
                if (mode == 'add') {
                    height = (res - 0) + (num - 0);
                } else if (mode == 'minus') {
                    height = res - num
                }
                if (this.height != height) this.height = height
            });
        }
    },
}
</script>

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

</style>