uni-app 导航栏制作适配多端⑤

九、导航栏制作适配多端

一、导航栏组件创建

1. 定义导航栏组件

2. 引入导航栏组件

   

同名组件支持 easycomment，不需要使用 import 方式进行导入即可使用

对组件名命方便我们的 devtools 进行内容查找

1. 结构搭建

   1. 图标使用

      uni-icons 图标插件安装：https://ext.dcloud.net.cn/plugin?id=28

2. 处理小程序显示错位问题

   微信及 APP 应用实现状态栏高度占位处理

   方法参考地址：https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync

   

   微信小程序胶囊信息获取

   文档参考地址:https://uniapp.dcloud.io/api/ui/menuButton?id=getmenubuttonboundingclientrect

   

3. 底部垫片添加