uni-app适配布局参考

栖柚与苏璃

已于 2024-03-08 10:57:00 修改

阅读量1.3k

点赞数 9

文章标签： uni-app

于 2024-03-07 17:56:03 首次发布

本文链接：https://blog.csdn.net/m0_73075579/article/details/136537419

版权

1.微信小程序+使用原生导航栏

<template>
	<view>
		<!--置顶区域-->
		<view class="head-layout">
			<!--置顶元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		<!--置顶元素相对的占位元素-->
		<view class="head-box" style="height: 100rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--中间区域-->
		<view style="width: 100%;height: 2000rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--置底元素相对的占位元素-->
		<view class="bot-box" style="height: 100rpx;"></view>
		<!--置底区域-->
		<view class="bot-layout">
			<!--置底元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
	.head-layout {
		width: 100%;
		position: fixed;
		top: 0;
	}

	.head-box {
		width: 100%;
	}

	.bot-layout {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.bot-box {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	/*注意：实际使用中需要根据需求调整置顶区域和置底区域的层级*/
</style>

2.微信小程序+不使用导航栏（H5+不使用导航栏）

<template>
	<view v-if="loading">
		<!--置顶区域-->
		<view class="head-layout" :style="{top:height+'px'}">
			<!--置顶元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		<!--状态栏相对的占位元素-->
		<view class="head-box" :style="{height:height+'px'}"></view>
		<!--置顶元素相对的占位元素-->
		<view class="head-box" style="height: 100rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--中间区域-->
		<view style="width: 100%;height: 2000rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--置底元素相对的占位元素-->
		<view class="bot-box" style="height: 100rpx;"></view>
		<!--置底区域-->
		<view class="bot-layout">
			<!--置底元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				/*状态栏高度*/
				loading: false /*控制页面加载*/
			}
		},
		onLoad() {
			/*异步获取状态栏高度*/
			uni.getSystemInfo({
				success: (res => {
					this.height = res.statusBarHeight
					this.loading = true
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.head-layout {
		width: 100%;
		position: fixed;
		top: 0;
	}

	.head-box {
		width: 100%;
	}

	.bot-layout {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.bot-box {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	/*注意：实际使用中需要根据需求调整置顶区域和置底区域的层级*/
</style>

3.微信小程序+自定义导航栏（H5+自定义导航栏）

<template>
	<view v-if="loading">
		<!--u-view2.0自定义导航栏，已设置固定在顶部同时生成一个等高元素防止塌陷，组件内部自动填充状态栏高度-->
		<u-navbar title="适配布局" :placeholder="true"></u-navbar>

		<!--置顶区域-->
		<view class="head-layout" :style="{top:alltop+'px'}">
			<!--置顶元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		<!--置顶元素相对的占位元素-->
		<view class="head-box" style="height: 100rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--中间区域-->
		<view style="width: 100%;height: 2000rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--置底元素相对的占位元素-->
		<view class="bot-box" style="height: 100rpx;"></view>
		<!--置底区域-->
		<view class="bot-layout">
			<!--置底元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alltop: 0,
				/*置顶区域top值*/
				loading: false /*控制页面加载*/
			}
		},
		onLoad() {
			/*异步获取系统信息*/
			uni.getSystemInfo({
				success: (res => {
					this.alltop = res.statusBarHeight + 40
					/*常量是自定义导航栏的固定高度（不包括状态栏），需要根据实际情况调整*/
					this.loading = true
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.head-layout {
		width: 100%;
		position: fixed;
		top: 0;
	}

	.head-box {
		width: 100%;
	}

	.bot-layout {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.bot-box {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	/*注意：实际使用中需要根据需求调整置顶区域和置底区域的层级*/
</style>

4.H5+使用原生导航栏

<template>
	<view v-if="loading">
		<!--置顶区域-->
		<view class="head-layout" :style="{top:alltop+'px'}">
			<!--置顶元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		<!--置顶元素相对的占位元素-->
		<view class="head-box" style="height: 100rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--中间区域-->
		<view style="width: 100%;height: 2000rpx;"></view>

		<!--间隔-->
		<view style="width: 100%;height:20rpx;"></view>

		<!--置底元素相对的占位元素-->
		<view class="bot-box" style="height: 100rpx;"></view>
		<!--置底区域-->
		<view class="bot-layout">
			<!--置底元素-->
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alltop: 0,
				/*置顶区域top值*/
				loading: false /*控制页面加载*/
			}
		},
		onLoad() {
			/*异步获取系统信息*/
			uni.getSystemInfo({
				success: (res => {
					this.alltop = res.windowTop
					this.loading = true
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.head-layout {
		width: 100%;
		position: fixed;
		top: 0;
	}

	.head-box {
		width: 100%;
	}

	.bot-layout {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.bot-box {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	/*注意：实际使用中需要根据需求调整置顶区域和置底区域的层级*/
</style>

结论基于微信开发工具和Chrome浏览器