phone_uni/components/custom-layout/custom-layout.vue

<template>
	<z-paging ref="paging" :refresherEnabled="refresherEnabled" v-model="tableData" :refresherOnly="refresheronly" @onRefresh="onRefresh" @scroll="onScroll" @query="onQuery">
		<template #top>
			<custom-nav-bar :background-color="backgroundColor" :back="back" :backgroundImageShow="true"  :topHeight="topHeight" ref="navbar" :title="title" :title-color="titleColor" >
				<slot name="navBarLeft" />
			</custom-nav-bar>
		</template>
		<template #bottom v-if="showPageBottom">
			<slot name="pagebottom" />
		</template>
		<template #refresher="{refresherStatus}" >
			<custom-refresher :status="refresherStatus" />
		</template>
		<view class="custom-content">
			<slot name="content" />
		</view>
		<template #loadingMoreNoMore v-if="showLoadingNomore">
			<custom-nomore />
		</template>
	</z-paging>
</template>
<script setup>
	import {
		ref,
		computed,
		defineEmits,
		onMounted
	} from 'vue';
	const emit = defineEmits(['update:modelValue', 'layoutquery','refresh','scroll'])
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		titleColor:{
			type: String,
			default: '#000000'
		},
		modelValue: {
			type: Array,
			default: [],
		},
		topHeight: {
			type: Number,
			default: 80
		},
		refresheronly:{
			type: Boolean,
			default: false
		},
		refresherEnabled:{
			type: Boolean,
			default: true
		},
		showBottom:{
			type: Boolean,
			default: false
		},
		backgroundColor: {
			type: String,
			default: 'linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B)'
		},
		// 返回按钮相关配置
		back: {
			type: Object,
			default: function() {
				return {
					// 是否显示返回按钮，默认显示
					show: true,
					// 返回按钮的图片地址
					// imgUrl: require('../../static/images/ico_back.png')
				}
			}
		},
		showPageBottom:{
			type: Boolean,
			default: false
		},
		showLoadingNomore:{
			type: Boolean,
			default: true
		}
	})
	// 自定义组件 customerComp
	const tableData = computed({
		// 自定义组件内部获取父组件传递的数据
		get: () => props.modelValue ? props.modelValue : [],
		// 数据发生变化时同步修改父组件中的数据
		set: (val) => {
			emit('update:modelValue', val);
		}
	})
	const navbar = ref()
	// 监听页面滚动
	function onScroll(event) {
		navbar.value.scrollScroll(event.detail.scrollTop)
		emit('scroll',event.detail.scrollTop)
	}
	// 下拉刷新或滚动到底部时会自动触发此方法
	function onQuery(pageNo, pageSize) {
		emit('layoutquery', {
			pageNo,
			pageSize
		})
	}
	
	function onRefresh(){
		emit('refresh',)
	}
	
	const paging = ref()
	function complete(list) {
		paging.value.complete(list);
	}
	
	defineExpose({
		complete
	})
</script>
<style>
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.custom-content{
		width: 100%;
		height: 100%;
	}
</style>