模仿mescroll-more.vue想实现自定义空状态（商品推荐）出现滚动到底部不加载的情况

这是我封装的自定义空状态组件,源码看的是懂非懂，望回复

<template>  
    <view class="container" v-show="props.i === props.index">  
        <!-- @down="downCallback" -->  
        <mescroll-body ref="mescrollItem" @init="mescrollInit" @up="upCallback"  
            :up="MescrollConfig.upOption" :down="MescrollConfig.downOption"  
            :bottombar="false">  
            <view class="empty-content">  
                <view class="empty">  
                    <image src="/static/mine/empty-2.png"></image>  
                    <view class="tips">  
                        您的购物车还是空的，赶紧行动吧！  
                    </view>  
                    <navigator url="">  
                        <button hover-class="btn-hover">  
                            去选酒  
                        </button>  
                    </navigator>  
                    <Guess title="猜你喜欢" :list="list" v-show="list.length"></Guess>  
                </view>  
            </view>  
        </mescroll-body>  
    </view>  
</template>  

<script>  
    import MescrollMixin from '../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'  
    // import MescrollMoreMixin from '../../uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js'  
    import MescrollMoreItemMixin from '../../uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js'  
    export default {  
        mixins:[MescrollMixin, MescrollMoreItemMixin],  
        setup() {  
            return {  
                MescrollMixin,  
                // MescrollMoreMixin,  
                MescrollMoreItemMixin  
            }  
        }  
    }  
</script>  

<script setup>  
    import { reactive, ref } from "vue";  
    import Guess from '../../components/guess.vue';  
    // import MescrollBody from '../../uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';  

    let list = ref([])  

    const props = defineProps(['i', 'index'])  

    /*  
        mescroll的配置与绑定  
    */  
    const MescrollConfig = reactive({  
        downOption: {  
            use: false,  
            auto: false,  
            autoShowLoading: true,    
            textColor: '#999',    
            offset: 50,  
        },  
        upOption: {  
            use: true,  
            auto: true,    
            noMoreSize: 1,  
            isBounce: false,  
            page: {  
                num : 0 ,  
                size : 10 ,  
                time : null  
            }  
        },  
    })  

    let mescrollEmpty = reactive({})  

    const mescrollInit = e => mescrollEmpty = e  

    const upCallback = (page) => {  
        console.log('emptyUp', mescrollEmpty);  
        let num = page.num  

        setTimeout(() => {  
            let arr = [{}, {}, {}, {}]  
            // if (num === 1) list.value = []  
            list.value = list.value.concat(arr)  
            console.log(mescrollEmpty.endBySize);  
            mescrollEmpty.endBySize(10, 100)  
        }, 1000)  
    }  
</script>  

<style lang="scss" scoped>  
    .empty-content {  
        .empty {  
            padding: 72rpx 0 0rpx;  
            text-align: center;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            image {  
                width: 430rpx;  
                height: 425rpx;  
            }  
            .tips {  
                margin-top: 32rpx;  
                font-size: 36rpx;  
            }  
            button {  
                padding: 10rpx 48rpx;  
                background: linear-gradient(270deg, #FC3C2D 0%, #E23A51 100%);  
                color: #FFF;  
                border-radius: 40rpx;  
                margin-top: 32rpx;  
                font-weight: bold;  
                margin-bottom: 150rpx;  
                &.btn-hover {  
                    background: linear-gradient(270deg, rgba(252, 60, 45, 0.6), rgba(226, 58, 81, 0.6));  
                }  
            }  
        }  
    }  
</style>