leromro-mini/pages/common/orderList/index.vue

<template>
    <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
        class="scroll-view-class" @scrolltolower="scrolltolower" scroll-y>
        <view class="list-page">
            <view v-for="(item, index) in data" :key="index">
                    <ListItem :data="item" v-if="userType === 2"/>
                    <UserItem :data="item" v-else/>
                </view>

                <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
				:loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
				:nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" />
        </view>
    </scroll-view>
</template>

<script setup>

import ListItem from './listItem.vue';
import UserItem from './userItem.vue';
import { ref } from 'vue';

const props = defineProps({
    data: {
        type: Array,
        default: [],
    },
    type: {
        type: String,
        default: 'ordinary', // ordinary: 普通 ranking: 排行
    }
});

const emit = defineEmits(['refresh']);
const userType = uni.getStorageSync('userType') //读取本地存储
const isRefreshing = ref(false)


const loadmoreInfo = ref({
	status: 'loadmore',
	loadingText: '努力加载中...',
	loadmoreText: '点击加载更多~',
	nomoreText: '已经到底啦～'
})
const scrolltolower = () => {
    emit('refresh','bottom');
};

const onCustomRefresh = () => {
    isRefreshing.value = true;
    emit('refresh','top');
};
//上拉刷新
const handleRefreshing = (status) => {
    isRefreshing.value = status;
}

//下拉刷新
const handleBottom = (value) => {
    loadmoreInfo.value.status = value?'loading':'nomore';
}
defineExpose({
    handleRefreshing,
    handleBottom
});

</script>

<style lang="scss" scoped>
.list-page {

    background: rgba(245, 245, 245, 1);
    padding: 12px;
    // height: 100%;
    // overflow-y: auto;

    .item {
        height: 120px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        padding: 12px;
    }
}

.scroll-view-class {
    height: 100%;
}
</style>