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";

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

const windowHeight = computed(() => {
    const sys = uni.getSystemInfoSync()
    return sys.windowHeight - props.diffHeight
})

const downCallback = (mescroll) => {
    mescroll.resetUpScroll()
}

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([])
let loadSeq = 0

const normalizeListData = (res) => {
    if (Array.isArray(res?.rows)) return res.rows
    if (Array.isArray(res?.data?.rows)) return res.data.rows
    if (Array.isArray(res?.data)) return res.data
    return []
}

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 || res.data?.total || 0)
            resolve(res)
        }).catch(reject)
    })
}

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

        emit('updateList', list.value, mescroll.num)
        const total = res.total ?? res.data?.total ?? 0
        mescroll.endBySize(curPageData.length, total)
    }).catch(() => {
        if (seq !== loadSeq) return
        mescroll.endErr()
    })
}

//重置列表
const resetUpScroll = () => {
    loadSeq++
    setTimeout(() => {
        const mescroll = getMescroll()
        if (!mescroll) return
        if (mescroll.isUpScrolling) {
            mescroll.endErr()
        }
        mescroll.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>