小程序底部导航栏 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

底部导航栏

关于小程序底部的导航栏，感觉也是一个可以拿出来说道说道的地方，原生的可以实现功能，但样式过于单一，可定义程度比较低，所以经常会自定义底部导航

原生

pages目录下新建多个页面

在iconfont下载图标

pages.json配置tabbar

效果

以上就是原生的定义方式，简单易上手，就是样式单调

自定义！

首先就是把原先自带的隐藏掉先 再者，自定义就要把组件写死在手机底部，但 考虑到苹果手机与安卓手机底部安全区一条横线的差别

原先是判断是否iOS来决定是否留底部安全区，但发现有些安卓手机也有底部安全区（一条横线），所以做了新的判断

原先代码
export default function isIOS(){
	let os = uni.getSystemInfoSync().system
	if(os.charAt(0) == 'i')return true
	else return false
}
新的方法
export default function hasSafeArea(){
	let screenHeight =  uni.getSystemInfoSync().screenHeight
	let safeHeight =  uni.getSystemInfoSync().safeArea.bottom
	if(screenHeight !== safeHeight)return true
	else return false
}

这样的话自定义组件的部分代码可以这样写

配合业务逻辑处理hasLogin，实现底部“动态”导航栏

<tabbar-bottom :selectedTab="2" :shown="hasLogin"></tabbar-bottom>

以上是考虑了底部动态的情况，静态的情况下更简单

使用时在页面简单写prop的值即可