UNI-APP Flex布局 Grid布局绝对定位网格布局示例

aa33677

已于 2024-06-15 16:09:37 修改

阅读量1.6k

点赞数 12

文章标签： uni-app css 前端

于 2024-06-15 15:52:39 首次发布

本文链接：https://blog.csdn.net/aa33677/article/details/139703762

版权

在uniapp中，页面布局可以使用template组件和各种内置的标签和样式来实现。以下是一个简单的uniapp页面布局示例：

<template>
  <view class="container">
    <view class="header">Header</view>
    <view class="content">
      <text>Hello, Uniapp</text>
    </view>
    <view class="footer">Footer</view>
  </view>
</template>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
  }
  .header {
    background-color: #f0f0f0;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer {
    background-color: #f0f0f0;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
</style>

在这个示例中，我们使用了view标签来作为容器和布局元素，并通过flex属性和样式来实现页面的垂直居中布局。同时，我们还设置了header和footer的高度和样式来实现页面布局。在实际开发中，可以根据需要使用更多的组件、布局和样式来实现各种复杂的页面布局。

以及一些说明

Uni-app 是一个基于Vue.js的开发框架，其布局可以使用Vue.js的各种布局方式来实现。常见的布局方式包括：

Flex布局：使用flex布局可以实现灵活的元素排列和对齐。可以通过设置父元素的display属性为flex来启用flex布局，然后通过设置子元素的flex属性来控制其占据的空间比例。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;
      background-color: #f2f2f2;
    }

    .item {
      width: 50px;
      height: 50px;
      background-color: #3498db;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

</body>
</html>

2.Grid布局：使用grid布局可以将页面分割成多个区域，并将元素放置在这些区域中。可以通过设置父元素的display属性为grid来启用grid布局，然后通过设置子元素的grid-column和grid-row属性来控制其在网格中的位置。

grid示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 100px;
      gap: 10px;
    }

    .item {
      border: 1px solid #000;
      padding: 20px;
      text-align: center;
    }

    .item-1 {
      grid-column: 1 / 3;
    }

    .item-2 {
      grid-row: 2 / 3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item-1">Item 1 (spanning 2 columns)</div>
    <div class="item item-2">Item 2 (spanning 1 row)</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

此示例演示了一个基本的CSS Grid布局。在容器内使用grid-template-columns和grid-template-rows定义了列和行的大小和数量。每个项目使用grid-column和grid-row属性定义了它们在网格中的位置。.item-1和.item-2类展示了如何使用这些属性来跨列或跨行放置项目。

3.绝对定位：使用绝对定位可以将元素放置在页面的指定位置，不受其他元素的影响。可以通过设置元素的position属性为absolute来实现绝对定位，并通过top、bottom、left、right属性来控制其在父元素中的位置。

绝对定位示例

首先，创建一个新的 uni-app 项目，或者在现有项目中编辑 pages/index/index.vue 文件。下面是一个基本的页面结构和样式示例：

<template>
  <view class="container">
    <view class="box"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  position: relative; /* 相对定位容器 */
  background-color: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #007aff;
  position: absolute; /* 绝对定位 */
  top: 50px; /* 距离顶部 50px */
  left: 50px; /* 距离左侧 50px */
}
</style>

注意事项

相对定容器：为了使绝对定位的子元素相对于某个容器进行定位，容器需要设置 position: relative 或其他非静态定位。
移动平台适配：在 uni-app 中，样式会自动适配到不同平台（iOS、Android、H5 等），但仍需要注意不同平台的细微差异。

4.网格布局：使用网格布局可以将页面分割成多个等宽的列，并将元素放置在这些列中。可以通过设置父元素的display属性为grid来启用网格布局，然后通过设置子元素的grid-column-start和grid-column-end属性来控制其在网格中的位置。

网格布局示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 10px;
      padding: 10px;
    }
    .grid-item {
      border: 1px solid #ccc;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
</div>

</body>
</html>

在这个示例中，我们使用grid-container来定义一个网格容器，然后使用grid-item来定义网格项。通过设置grid-template-columns属性为auto auto auto，我们创建了一个包含三列的网格布局，并使用grid-gap属性来定义网格项之间的间距。最后，我们将每个网格项中的内容居中显示，并添加了一些边框和内边距，以增强可读性。

以上这些布局方式都可以在Uni-app中使用，根据具体的页面需求和设计风格选择合适的布局方式来实现。