小程序实现自定义导航栏适配完美版-创新互联

1、发现问题

牧野网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的可以先>>了解一下)，这极大的提升了小程序开发的自由度，相信不少小伙伴已经使用过这个功能，同时也相信不少小伙伴在此功能开发过程中踩过同样的一些坑：

同样的，这些问题也是小灰经历过的。但是小灰相信，办法总比问题多，于是开始了自己的探究：

2、一探究竟

为了搞明白到底该怎么去适配，老规矩，我先翻了一波官方文档，还别说，官方还真有这么一段介绍了相关细节，>>详情点击：

小程序实现自定义导航栏适配完美版

从图中分析，我们可以得到如下信息：

这。。。，好像并没有什么L用啊？？这仅仅是普通屏幕为参照的，ipx，安卓全面屏完全没介绍。
沉着冷静，我们接着分析：

那么我们来论证一下：

第一个问题：胶囊按钮到状态栏下边缘的距离是不是固定的？

很简单，我们写一个状态栏，通过wx.getSystemInfoSync().statusBarHeight设置高度

为了好测量，我们设置状态栏背景色为深色

js代码：

var sysinfo = wx.getSystemInfoSync();
this.setData({ 
 statusBarHeight:sysinfo.statusBarHeight 
})

当前题目：小程序实现自定义导航栏适配完美版-创新互联
文章分享：http://6mz.cn/article/desdgg.html

网站建设知识