uni-app适配布局参考

已于 2024-03-08 10:57:00 修改
阅读量1.5k 收藏 12
点赞数 9
文章标签： uni-app
于 2024-03-07 17:56:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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浏览器

栖柚与苏璃
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp精美ui模板
05-27
uniapp精美ui模板适用于各种app
IT廉连看——Uniapp——页面样式与布局
weixin_72932310的博客
02-27 2327
​
uniapp的flex布局
最新发布
YQCC1的博客
06-20 1953
align-content有六个值： flex-start | flex-end | center | space-between | space-around | stretch，分别对应整体靠上,整体靠下,整体居中,整体垂直拉伸,整体垂直均匀排列,整体均匀分布且垂直两端保留间距一半空间。​ 如果设置成这样flex-direction: row-reverse，表示从右到左，则会变成如下的展示方式。​ 是flex-grow（放大比例）, flex-shrink（缩小比例） 和 flex-basis（
uniapp快速入门系列（3）- CSS技巧与布局
赤兔码
10-09 2850
在uniapp中，我们使用CSS来设置页面的样式和布局。本章将介绍一些在uniapp中常用的CSS技巧和布局实例，帮助你更好地美化页面和实现各种布局效果。以上是uniapp中常用的CSS技巧和布局实例，以及如何使用CSS动画和过渡效果增强页面的动态效果。可以直接编写常规的CSS样式，也可以使用预编译的CSS工具，比如Sass或Less。除了使用CSS动画，uniapp还支持使用过渡效果为元素添加平滑的过渡效果。弹性布局和自适应高度的方式。的动画，持续时间为2秒，使用线性变换方式，并无限循环播放动画。
uniapp-layout-1.ecm.mp4.rar
05-16
不错的uni-app开发视频资源，终于找到了。找了好几个月，不错。
uni-app之flex布局教程 uniapp在线教程 uni app视频教程
04-17
讲解uni-app中如何使用flex的布局，uni-app中原生界面开发必学技能讲解了flex的容器属性讲解了flex的项目属性
浅谈uniapp的flex布局
qq_36305027的博客
05-10 1万+
1 flex布局 ​ flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。 1.1 flex-direction ​ 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。 <template> <view style="dis
uniapp组件-uni-row/col 布局
热门推荐
03-03 1万+
目录 一、基础布局 二、混合布局 三、分栏偏移（offset、pull、push） 四、响应式布局 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局 gutter属性表示间隔 一、基础布局 使用单一分栏创建基础的栅格布局 <template> <view> <uni-row style="margin-bottom: 10px;"> <uni-col><view class="demo-uni-co.
uni-app开发应用时，如何进行页面布局和设计？【跨平台开发教程uniapp教程（米饭科技-app小程序h5源码）】
weixin_42317757的博客
05-25 2492
在uni-app中，可以使用Vue.js的语法进行页面布局和设计。以下是一些基本的布局和设计方法：1.flex布局使用快速入门，2.grid布局使用快速入门
uni-app优医问诊-配套资料
05-04
【uni-app优医问诊-配套资料】是2023年某马前端就业版最新线下课程的一部分，专为学习者提供了丰富的学习素材，旨在帮助学员深入理解和掌握uni-app框架在医疗领域应用的实践技巧。uni-app是一个多端开发框架，它允许...
uni-app登录实例的实现
03-29
uni-app支持Flex布局，可以轻松实现跨平台的适配。 10. **错误处理与提示** 在用户操作过程中，可能会遇到各种错误，如网络问题、服务器返回错误等。uni-app提供了uni.showModal()等函数，可以方便地弹出提示信息...
uni-app小程序简单聊天.rar
12-15
- 聊天窗口的样式设计，可以利用uni-app的CSS样式和Flex布局，确保在不同设备上适配良好。 - 通过动态设置消息气泡的左右位置，区分发送和接收的消息。 6. **接口设计** - 设计API接口，如登录验证、获取联系人...
uni-app新大陆PDA扫描盘点RFID小示例
01-28
在uni-app中，需要适配PDA的RFID接口，实现RFID标签的读取和处理。 4. 盘点功能实现：在uni-app应用中，盘点功能的实现需要调用PDA的RFID接口，监听RFID标签的读取事件，当有标签读取到时，将标签ID及相关数据存储...
基于uni-app开发的新闻和资讯类App模板
02-22
9. **适配小程序**：除了原生App，uni-app还能将项目打包为各平台的小程序，模板需要考虑小程序特定的开发规范和限制，如微信小程序的尺寸单位、网络请求的处理等。 10. **版本控制与部署**：使用Git进行版本控制，...
uniapp适配问题
qq_59076775的博客
07-05 1万+
uni适配问题，rem适配
uniapp页面布局
qq_44871531的博客
09-06 1904
常用的uniapp、vue页面布局
移动端适配
weixin_73416102的博客
12-08 1883
移动端适配
uni-app 5小时快速入门 16 uni-app样式与布局
谢谢你们的关注
08-25 1278
uni-app 5小时快速入门 16 uni-app样式与布局
uniapp页面适配平板和手机
qq_42864422的博客
07-31 1万+
一、移动端优先 一般建议直接给出750px的手机设计稿，通过rpx等比缩放。这里需要注意的是uniapp默认适配的最大屏幕宽度为960px，超过这个范围rpx将不生效，而某些平板的尺寸比如ipad pro宽度超过了这个数值，所以需要在pages.json中添加配置： "globalStyle": { "rpxCalcMaxDeviceWidth": 1024, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx
uni-app 小程序 ios 安全区域适配
09-05
uni-app是一种跨平台开发框架，可以将同一份代码编译成微信小程序、支付宝小程序、H5页面和App等多个平台上运行。在uni-app中，iOS安全区域适配是指在iPhone X及以上设备上，由于屏幕顶部和底部的安全区域（刘海区域和Home条区域），需要对界面进行相应的适配，以保证内容的显示不被遮挡。 在iOS上，uni-app提供了两种方式来进行安全区域适配：safe-area和safe-area-inset。 safe-area是一种简单快捷的布局方式，在组件的外层使用类似flex布局中的justify-content和align-items属性来对组件进行居中适配，它能够根据不同设备的安全区域自动调整，简单易用。 而safe-area-inset则是一种更为灵活的适配方式，它提供了一系列的CSS变量，可以精确控制组件的位置和尺寸，更加细致地适配不同的安全区域。可以通过设置top、right、bottom和left等变量来调整组件的边距，以确保不被安全区域遮挡。 在uni-app的页面配置文件（例如manifest.json）中，可以使用“safe-area”: true来开启安全区域适配，这样在编译成iOS小程序时，uni-app会根据设备的安全区域自动对页面进行适配。 总之，uni-app提供了方便灵活的iOS安全区域适配方式，可以帮助开发者在编写项目时轻松处理iOS设备的安全区域，提升用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值