概述
移动端常见页面结构，通常包含 页头，主体内容 和 页尾，显示如下：
整个结构采用 flex 布局，宽高占满整个屏幕，主体内容 为纵向超出容器出现滚动条。
按需引入
import Vue from 'vue';
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
/* 使用px：import {Layout} from 'vue-ydui/dist/lib.px/layout'; */
Vue.component(Layout.name, Layout);代码示例
<template>
<yd-layout>
<yd-navbar slot="navbar" title="NavBar">
<router-link to="#" slot="left">
<yd-navbar-back-icon></yd-navbar-back-icon>
</router-link>
</yd-navbar>
<div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
<div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
<div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
<yd-tabbar slot="tabbar">
<yd-tabbar-item title="首页" link="#" active>
<yd-icon name="home" slot="icon"></yd-icon>
</yd-tabbar-item>
<yd-tabbar-item title="购物车" link="#">
<yd-icon name="shopcart-outline" slot="icon"></yd-icon>
</yd-tabbar-item>
<yd-tabbar-item title="个人中心" link="#">
<yd-icon name="ucenter-outline" slot="icon"></yd-icon>
</yd-tabbar-item>
</yd-tabbar>
</yd-layout>
</template>
<script>
export default {
}
</script>乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
通过 slot="navbar" 和 slot="tabbar" 定制页头和页尾。
<template>
<yd-layout title="啦啦啦啦" link="#">
<div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
<div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
<div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
<yd-tabbar slot="tabbar">
<yd-tabbar-item title="首页" link="#">
<yd-icon name="home" slot="icon"></yd-icon>
</yd-tabbar-item>
<yd-tabbar-item title="购物车" link="#" active>
<yd-icon name="shopcart" slot="icon"></yd-icon>
</yd-tabbar-item>
<yd-tabbar-item title="个人中心" link="#">
<yd-icon name="ucenter-outline" slot="icon"></yd-icon>
</yd-tabbar-item>
</yd-tabbar>
</yd-layout>
</template>
<script>
export default {
}
</script>乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
通过指定 yd-layout组件的 title 和 link，快速调用 <yd-navbar> 组件。