shuhi-app/components/pageScroll/index.vue

<template>
    <mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :height="height || windowHeight + 'px'"
        :up="{ textNoMore: '-- 没有更多了 --', auto: isUpAutoLoad }" :down="{ auto: isUpAutoLoad }">
        <slot></slot>
    </mescroll-uni>
</template>

<script setup>
import {
    computed,
    onMounted,
    ref,
    watch,
    reactive
} from 'vue';
import {
    onShow
} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import {
    store
} from "@/store/index.js"


// 调用mescroll的hook (注: mescroll-uni不用传onPageScroll,onReachBottom, 而mescroll-body必传)
const {
    mescrollInit,
    downCallback,
    getMescroll
} = useMescroll()

const windowHeight = computed(() => {
    return store.clientHeight - props.diffHeight
})

const emit = defineEmits(['updateList', 'update:total'])
const props = defineProps({
    request: {
        type: Function
    },
    requestStr: {
        type: String
    },
    isRefresh: {
        type: [Number, Boolean],
        default: 0
    },
    height: {
        type: [String, Number]
    },
    total: {
        type: [Number],
        default: 0
    },
    otherParams: {
        type: Object,
        default: () => ({})
    },
    diffHeight: {
        type: Number,
        default: 0
    },
    immediate: {
        type: Boolean,
        default: false
    },
    method: {
        type: String,
        default: 'get'
    },
    isUpAutoLoad: {
        type: Boolean,
        default: true
    }
})

const list = ref([])

const getList = (mescroll) => {
    return new Promise((resolve, reject) => {
        let params = {
            pageNum: mescroll.num,
            pageSize: mescroll.size,
            ...props.otherParams
        }
        let methods = props.method == 'post' ? uni.$u.http.post(props.requestStr, params) : uni.$u.http.get(props.requestStr, {
            params
        })

        methods.then(res => {
            emit('update:total', res.total)
            resolve(res)
        })
    })
}

// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = (mescroll) => {
    console.log(mescroll, 'mescroll')
    if (!props.requestStr) return;
    getList(mescroll).then(res => {
        const curPageData = res.rows || res.data || [] // 当前页数据
        if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
        list.value = list.value.concat(curPageData); //追加新数据

        emit('updateList', list.value, mescroll.num)
        //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总数据量)

        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
        //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
        // mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
    }).catch(() => {
        mescroll.endErr(); // 请求失败, 结束加载
    })
}

//重置列表
const resetUpScroll = () => {
    setTimeout(() => {
        getMescroll().resetUpScroll()
    }, 100)
}

const scroll = (e) => {
    emit('scroll', e)
}

defineExpose({
    resetUpScroll
})
</script>

<style lang="scss" scoped>
.item {
    line-height: 150rpx;
    border-bottom: 1px solid #ccc;
}
</style>