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