Vant3 的 Layout 布局组件用于快速搭建页面的基本结构，提供了一些灵活的布局选项。以下是一些关于 Vant3 Layout 布局的基本用法和示例：

基本用法：
<template>
  <van-layout>
    <van-layout-header>头部</van-layout-header>
    <van-layout-content>内容区</van-layout-content>
    <van-layout-footer>底部</van-layout-footer>
  </van-layout>
</template>

在上述代码中，<van-layout> 是布局的最外层容器，而 <van-layout-header>、<van-layout-content> 和 <van-layout-footer> 分别代表头部、内容区和底部。

切换标签页：
<template>
  <van-tabs v-model="activeTab">
    <van-tab title="标签1">
      <van-layout>
        <van-layout-header>头部</van-layout-header>
        <van-layout-content>内容区1</van-layout-content>
        <van-layout-footer>底部</van-layout-footer>
      </van-layout>
    </van-tab>
    <van-tab title="标签2">
      <van-layout>
        <van-layout-header>头部</van-layout-header>
        <van-layout-content>内容区2</van-layout-content>
        <van-layout-footer>底部</van-layout-footer>
      </van-layout>
    </van-tab>
  </van-tabs>
</template>

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

在上述代码中，通过结合 Vant3 的 Tabs 组件，你可以实现在不同标签页之间切换，每个标签页内部的布局独立。

设置自定义高度：
<template>
  <van-layout>
    <van-layout-header :height="60">头部</van-layout-header>
    <van-layout-content>内容区</van-layout-content>
    <van-layout-footer :height="50">底部</van-layout-footer>
  </van-layout>
</template>

通过设置 <van-layout-header> 和 <van-layout-footer> 的 height 属性，你可以自定义它们的高度。

以上是一些 Vant3 Layout 布局组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Layout 布局文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/layout)。


转载请注明出处：http://www.zyzy.cn/article/detail/5712/Vant