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>

最后

以上就是唠叨小甜瓜为你收集整理的vue组件-移动端上下布局-顶部和底部固定，中间内容自定义的全部内容，希望文章能够帮你解决vue组件-移动端上下布局-顶部和底部固定，中间内容自定义所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。