uniapp布局规范
uniapp布局规范
uniapp的布局规范基于Flexbox模型，支持跨平台开发，需兼顾不同设备的适配性。以下是核心布局要点：
Flex布局基础
使用Flexbox实现弹性布局，默认display: flex，通过flex-direction控制主轴方向。
示例代码：
.container {
display: flex;
flex-direction: row; /* 可选row|column */
justify-content: center; /* 主轴对齐 */
align-items: flex-start; /* 交叉轴对齐 */
}响应式单位
推荐使用rpx（响应式像素）作为单位，750rpx等于屏幕宽度。
公式换算：
实际像素 = (设计稿元素宽度 / 750) * 屏幕实际宽度对于需要固定尺寸的元素，可使用px单位。
安全区域适配
处理刘海屏和底部安全区域：
.safe-area {
padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 标准写法 */
}栅格系统
通过uni-row和uni-col组件实现栅格布局：
<uni-row>
<uni-col :span="8">左侧</uni-col>
<uni-col :span="16">右侧</uni-col>
</uni-row>定位方案
- 相对定位：
position: relative - 绝对定位需指定父容器为相对定位：
.parent { position: relative; } .child { position: absolute; top: 20rpx; left: 0; }
滚动处理
使用scroll-view组件实现区域滚动：
<scroll-view scroll-y style="height: 300rpx">
<view v-for="item in list" :key="item.id">{{item.text}}</view>
</scroll-view>跨平台差异处理
通过条件编译处理平台差异：
/* #ifdef H5 */
.h5-style { margin-top: 10px; }
/* #endif */性能优化
- 避免深层嵌套的Flex布局
- 减少不必要的
z-index使用 - 对长列表使用
<recycle-list>组件
以上规范需结合具体项目需求调整，建议通过真机测试验证各平台显示效果。
