uniapp【优化】: 骨架屏背景问题

CoreCms.Net.Uni-App/CoreShop/components/coreshop-page/coreshop-page.vue

@@ -1,12 +1,11 @@
 <template>
-	<template v-if="props.needSkeleton">
-		<uv-skeletons style="padding:20rpx" class="coreshop-skeleton" :skeleton="props.skeleton"
-			:loading="props.skeletonLoading">
+	<view v-if="props.needSkeleton" class="coreshop-skeleton">
+		<uv-skeletons :skeleton="props.skeleton" :loading="props.skeletonLoading">
 			<coreshop-page-content v-bind="props">
 				<slot name="default" />
 			</coreshop-page-content>
 		</uv-skeletons>
-	</template>
+	</view>
 
 	<template v-else>
 		<coreshop-page-content v-bind="props">
@@ -66,24 +65,6 @@
 </script>
 <style lang="scss" scoped>
 	.coreshop-skeleton {
-		padding: 20rpx;
+		background-color: #fff;
 	}
-
-	:deep(.uv-skeleton) {
-		padding: 20rpx;
-	}
-</style>
-
-<style>
-	.coreshop-skeleton {
-		padding: 20rpx;
-	}
-
-	.uv-skeleton {
-		padding: 20rpx !important;
-	}
-
-	:deep(.uv-skeleton) {
-		padding: 20rpx !important;
-	}
-</style>
+</style> 

CoreCms.Net.Uni-App/CoreShop/pages/home/home.vue

@@ -48,8 +48,6 @@
 
 	const loading = ref(true);
 
-
-
 	const handleuQueryPageConfig = useLoadingFn(getPageConfig, loading);
 
 	const state = reactive<{
@@ -133,11 +131,4 @@
 
 <style lang="scss" scoped>
 	@import './home.scss';
-</style>
-
-<style lang="scss">
-	.page-bg,
-	page {
-		background-color: #ffffff !important;
-	}
 </style>

CoreCms.Net.Uni-App/CoreShop/pages/home/skeleton.ts

@@ -1,4 +1,13 @@
 export const skeleton = [
+	{
+		type: 'flex',
+		num: 1,
+		children: [{
+			type: 'line',
+			num: 1,
+			style: `height:80px;background: #fff;`
+		}]
+	},
 	{
 		type: 'flex',
 		num: 1,
@@ -49,4 +58,4 @@ export const skeleton = [
 				style: ["marginRight: 20rpx;", "marginRight: 20rpx;", "marginRight: 20rpx;"]
 			}]
 	}
-]
+]