手机端顶天立地布局

上来就干货！

使用示例 eg.vue

<template>
  <page-box>
    <v-header slot="header" title="基本信息"/>
    <div>我是中间内容</div>
    <v-footer nextText="下一步" @next="nextStep"/>
  </page-box>
</template>
<script>
//pageBox和VHearder在main.js作为全局引入了
import VFooter from "@/components/VFooter";
export default {
  components: { VFooter }
};
</script>
<style lang="less" scoped>
</style>

效果（是时候展示我的灵魂画手了）

效果图

pageBox.vue

<template>
  <div class="page-box">
    <slot name="header"></slot>
    <div class="main" ref="mainBox">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>
<script>
export default {
  methods: {
    scrollTo(top) {
      // window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      this.$refs.mainBox.scrollTop = top;
    },
    getScrollTop() {
      return this.$refs.mainBox.scrollTop;
    },
    getScrollBody() {
      return this.$refs.mainBox;
    }
  }
};
</script>
<style lang="less" scoped>
.page-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
  }
  .main {
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .footer {
  }
}
</style>

VHeader.vue

<template>
    <header class="_header" :style="{backgroundColor: bgColor}">
        <div class="_left" v-if="showBack" @click="back">
            <span v-if="leftText">{{leftText}}</span>
            <slot name="left"></slot>
        </div>
        <div class="_center">
            <span v-if="title">{{title}}</span>
            <slot name="center"></slot>
        </div>
        <div class="_right">
            <span v-if="rightText">{{rightText}}</span>
            <slot name="right"></slot>
        </div>
        <slot></slot>
    </header>
</template>
<script>
let noop = function() {};
export default {
  props: {
    bgColor: {
      type: String,
      default: ""
    },
    showBack: {
      type: Boolean,
      default: true
    },
    leftText: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    rightText: {
      type: String,
      default: ""
    },
    backCall: {
      type: Function,
      default: noop
    }
  },
  methods: {
    back() {
      if (this.backCall == noop) {
        this.$router.back();
      } else {
        this.backCall();
      }
    }
  }
};
</script>
<style lang="less" scoped>
._header {
  position: relative;
  width: 100%;
  background-color: @theme-color;
  height: 46px;
  color: #fff;
  font-size: 18px;
  z-index: 400;
  ._left {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 0.6rem;
    line-height: 46px;
    height: 100%;
    z-index: 50;

    &:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0.3rem;
      width: 15px;
      height: 15px;
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      transform: translate(0, -50%) scale(0.9, 0.8) rotate(-45deg);
    }
  }
  ._center {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0 0.3rem;
    text-align: center;
    transform: translate(0, -50%);
    z-index: 1;

    span {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  ._right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 50;
  }
}
</style>

VFooter.vue

<template>
  <div class="footer">
    <a href="javascript:;" class="long-btn active" @click="$emit('next')" v-if="nextText">{{nextText}}</a>
  </div>
</template>
<script>
export default {
  props: ["nextText"]
};
</script>
<style lang="less" scoped>
.long-btn{
    margin: 0.5rem auto;
}
</style>