uni-app 怎么自定义顶部导航和底部导航，弹性布局增加数据自适应（简易）

uni-app 怎么自定义顶部导航和底部导航，弹性布局增加数据自适应，简单易懂

底部效果：
uni-app 怎么自定义顶部导航和底部导航，弹性布局增加数据自适应（简易）

1.首先弄点底部的原始数据，比如首页、个人中心等文字，默认图标，点击后的图标

uni-app 怎么自定义顶部导航和底部导航，弹性布局增加数据自适应（简易） #### 2.写标签和样式

主要样式
uni-app 怎么自定义顶部导航和底部导航，弹性布局增加数据自适应（简易）

还有一些基本的样式
/* 图片 /
image{
width: 100%;
height: 100%;
}
/ 弹性布局 /
.fle{
display: flex;
}
.fle_all{
display: flex;
align-items: center;
justify-content: center;
}
.fle_all2{
display: flex;
align-items: center;
justify-content: space-between;
}
.fle_jus2{
display: flex;
align-items: center;
}
.fle_all3{
display: flex;
align-items: center;
justify-content: space-around;
}
.fle_jus3{
display: flex;
justify-content: space-around;
}
.fle_col{
display: flex;
flex-direction: column;
}
.fle_row{
display: flex;
flex-direction: row;
}
.fle_wra{
/ 换行 */
flex-wrap: wrap;
}
.fle_sta{
align-self: flex-start;
}
.fle_end{
align-self: flex-end;
}
.fle_bas{
align-self: baseline;
}
.fle_ali{
display: flex;
align-items: center;
}
.fle_jus{
display: flex;
justify-content: center;
}
.fle1{
flex: 1;
}
.fle1_2{
flex: 1.5;
}
.fle2{
flex: 2;
}
.fle3{
flex: 3;
}
.fle4{
flex: 4;
}
.fle5{
flex: 5;
}
.fle6{
flex: 6;
}
.fle7{
flex: 7;
}