uni-app爬坑之旅_开发一个自己的app_day08_分享学习笔记(flex布局和easyCom机制)

一、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 布局语法教程