leromro-mini/pages/order/list/index.vue

<template>
    <view class="list-page">
        <up-list @scrolltolower="scrolltolower" style="height: 100%;" v-if="type === 'ordinary'">
            <up-list-item v-for="(item, index) in data" :key="index" >
                <ListItem :data="item" />
            </up-list-item>
            <up-loadmore
					:line="true"
					status="nomore"
				></up-loadmore>
        </up-list>

        <up-list @scrolltolower="scrolltolower" style="height: 100%;" v-else>
            <up-list-item v-for="(item, index) in data" :key="index" >
                <RankingItem :data="item" />
            </up-list-item>
            <up-loadmore
					:line="true"
					status="nomore"
				></up-loadmore>
        </up-list>
    </view>
	
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import ListItem from './listItem.vue';
import RankingItem from './rankingItem.vue';


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

const emit = defineEmits(['refresh']);


const scrolltolower = () => {
    console.log('底部');
    // emit('refresh');
};

</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;
    }
}
</style>