一，资料：
二
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值
