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 Teamdiv>
        <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>