uniapp布局样式

uniapp布局样式基础

uniapp支持使用Flex布局和Grid布局，默认采用Flex布局方式。在uni.css中已内置Flex相关样式类，可直接使用。

Flex布局常用样式类：

• flex：启用Flex布局
• flex-row：横向排列（默认）
• flex-column：纵向排列
• justify-start/center/end/between/around：主轴对齐方式
• items-start/center/end/stretch：交叉轴对齐方式

页面布局实现方式

视图容器组件

• <view>：基础视图容器，类似HTML的<div>
• <scroll-view>：可滚动视图区域
• <swiper>：滑块视图容器

示例代码

<template>
  <view class="container">
    <view class="header">头部</view>
    <view class="content">
      <view v-for="i in 5" :key="i" class="item">项目{{i}}</view>
    </view>
    <view class="footer">底部</view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header, .footer {
  height: 80rpx;
  background-color: #007AFF;
  color: white;
}
.content {
  flex: 1;
  overflow: auto;
}
.item {
  height: 120rpx;
  margin: 20rpx;
  background-color: #f0f0f0;
}
</style>

响应式布局处理

uniapp支持使用rpx单位实现响应式布局，750rpx等于屏幕宽度。

媒体查询示例

@media screen and (min-width: 768px) {
  .item {
    width: 50%;
    float: left;
  }
}

条件编译实现多端适配

<!-- #ifdef H5 -->
<view class="pc-style">PC端样式</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="wechat-style">微信小程序样式</view>
<!-- #endif -->

常见布局模式

两栏布局

.two-column {
  display: flex;
}
.sidebar {
  width: 200rpx;
}
.main-content {
  flex: 1;
}

等分布局

.equal-distribution {
  display: flex;
}
.equal-distribution view {
  flex: 1;
  text-align: center;
}

定位布局

.position-container {
  position: relative;
  height: 300rpx;
}
.position-item {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 100rpx;
  height: 100rpx;
}

样式编写规范

• 使用scoped样式避免污染全局样式

  <style scoped>
  /* 这里的样式只作用于当前组件 */
  </style>

• 全局样式写在App.vue或单独样式文件中

• 避免直接使用平台特有样式，如-webkit-box

• 推荐使用CSS变量管理主题色等公共样式

  :root {
  --primary-color: #007AFF;
  }
  .button {
  background-color: var(--primary-color);
  }