vue组件-移动端上下布局-顶部和底部固定，中间内容自定义

162 阅读 0 评论 107 点赞

我是靠谱客的博主唠叨小甜瓜，这篇文章主要介绍vue组件-移动端上下布局-顶部和底部固定，中间内容自定义，现在分享给大家，希望可以做个参考。

如图布局
在这里插入图片描述

<template>
  <div class="container flexbox-column">
    <div class="header-container">
      <slot name="header"></slot>
    </div>

    <div class="section-box flex-1">
      <slot name="section">
      </slot>
    </div>

    <div class="footer-container">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

.container {
    height: 100%;

    .section-box {
      overflow-y: scroll;
    }

    .header-container, footer-container {
      position: fixed;
      width: 100%
    }

    .header-container {
      top: 0
    }

    .footer-container {
      bottom: 0;
    }
  }

运用组件

  <container>
    <div slot="header">
      <div class="flexbox-row flex-just-between flex-align-center header-box">
        <div @click="$router.back()"><i class="el-icon-arrow-left font-16 font-weight"></i></div>
        <div>EV Mobile Team</div>
        <div @click="toAddPage"><i class="el-icon-plus font-16 font-weight"></i></div>
      </div>
    </div>

    <div slot="section" style="margin-top: 44px;margin-bottom: 54px">
      content内容
    </div>

    <div slot="footer">
      footer
    </div>
  </container>