一、uni-app方面
1.uni-app去除顶部导航栏
uni-app生成的界面自带顶部导航栏,如果不去掉,就会像下图的效果,有个灰色的顶部导航栏
去掉的方法:在 pages.json 文件里面设置对应页面的导航栏样式为自定义
"pages": [
{
"path" : "pages/tabbar/main/main", // 对应页面地址
"style" :
{
"navigationStyle":"custom",
}
}
]
2.easyCom机制
uni-app的核心语法是vue,因此在组件引入的时候也要像vue一样,先导入,再注册,然后才能使用,一般代码如下
<script>
import navbar from '@/components/navbar/navbar.vue'
export default {
components:{
navbar
}
}
</script>
但是uni-app的easyCom机制允许路径为'@/components/com_name/com_name.vue'的组件(com_name为组件名),即使不引入不注册也能在任意页面使用,原因是uni-app会自动为页面需要用到组件的地方,可以局部引入组件,省去上面的代码,简化了我们的开发
二、CSS方面
1.flex弹性布局
之前做导航栏的时候,都是把li元素做左浮动,让它变成横向元素,形成导航栏的效果,但是遇到一个li里面包含图片+文字的,很容易发生图片和文字中心线不对称的情况,又要通过margin、padding来调整位置,十分麻烦,而flex布局可以轻松地解决这个问题,让li元素向左浮动的同时,图片和文字中心线一致,代码如下:
nav li{
display:flex;
align-items: center;
}
如果你想了解更多有关flex布局的信息,推荐去看菜鸟教程的: Flex 布局语法教程