logpm/compoment/BasicContainer/BasicContainer.vue

<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar :title="title" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
			titleStyle='color:#ffffff'></u-navbar>
	</view>

	<!-- 插槽 -->
	<template v-if="haveData">
		<slot></slot>
		<view v-show="isEnd" class="footer-end">
			到底啦
		</view>
	</template>

	<template v-else>
		<view class="footer-end">暂时没有数据哦 ~</view>
	</template>
</template>

<script setup lang="ts">
	import {
		defineProps,
		ref,
		toRefs
	} from 'vue';

	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const props = defineProps({
		option: {
			type: Object,
			default: {}
		},
		title: {
			type: String
		}
	})

	let { title, isEnd, haveData } = toRefs(props.option)

	if (!title) title = ref('货物优')

	// 是否请求完毕数据
	if (isEnd === undefined) isEnd = ref(false)

	// 下拉刷新请求页面
	const pullDownRefreshInitPage = props.option.pullDownRefreshInitPage || function () { }
	// 触底加载请求页面
	const reachBottomInitPage = props.option.reachBottomInitPage || function () { }

	// 初始化执行
	onLoad(() => {
		console.log('初始化')
		console.log('props :>> ', props);
		// 初始化刷新
		uni.startPullDownRefresh()
	})

	// 添加防抖函数
	let antiShake : any = null
	// 触底加载
	onReachBottom(() => {
		// 数据请求完毕, 不再请求
		if (isEnd.value) return
		if (antiShake) return clearTimeout(antiShake)
		antiShake = setTimeout(() => {
			// 触发触底回调
			reachBottomInitPage()
			// 停止刷新动画
		}, 1000)
	})


	// 下拉刷新
	onPullDownRefresh(() => {
		setTimeout(() => {
			// 触发下拉回调
			pullDownRefreshInitPage()
			uni.stopPullDownRefresh()
		}, 1000)
	})
</script>

<style>
	.footer-end {
		padding: 20upx 0;
		text-align: center;
	}
</style>