一，资料：

一只基于vue2.x的移动端&微信ui--布局layout

二

1.在vue中的UI（ydui），默认结构布局采用flex，宽高是占满整个屏幕

<template>
<yd-layout>
  <!--主体内容-->
  tips：<layout></layout>仅适用于整体页面布局，不能使用在其他组件中。即在页面开始的时候就使用layout布局
  <!---->
</yd-layout>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>

2.页面高度不足100%

<template>
  <div style="height: 100%;">
      <yd-layout title="...">
          tips:若 yd-layout 组件的父级包含了高度不是100%的元素，需手动将其高度设置为100%，否则页面将不能正常滚动。
      </yd-layout>
  </div>
</template>

或者直接在vue中的App.vue中直接设置，即：

<template>
<div style="height:100%">
  <router-view></router-view>
</div>
</template>

三

yd-layout组件中还有顶部导航（yd-navbar）和底部导航（yd-tabbar）。除此之外，yd-layout组件中的slot不只有navbar和tabbar，还有top（上部内容），bottom（下部内容）

image.png

<!--适用于在yd-layout中固定顶部或者底部-->
<div slot="top"></div>
<div slot="bottom"></div>

四：底部tabbar组件应用

<FooterBar slot="tabbar"></FooterBar>
//在页面引用组件的时候，添加相应的slot值