实现小程序插件自定义导航栏

最近有用户提出腾讯位置服务路线规划插件在小程序自定义导航栏以后，致使路线规划插件的导航栏消失问题，发现小程序自定义导航栏会影响插件导航栏。

决定使用插件自定义导航栏来解决这一问题。下面是对于插件自定义导航栏的开发心得。

1. 了解小程序导航栏

小程序导航栏的整体划分为下面几个区域：

 

2. 小程序自定义导航栏

小程序能够提供能够本身自定义导航栏接口，接下来咱们来学习下怎么进行自定义导航栏：

知己知彼，方百战百胜。首先咱们要了解默认导航栏是怎么计算的：

1. 默认导航栏

1. wx.getSystemInfo能够获取屏幕的位置信息；

2. screenHeight - windowHeight = 屏幕的导航栏高度（totalBarHeight)；

3. 状态栏高度可根据systemInfo中statusBarHeight值获取；

4. 标题的高度(titleBarHeight) = totalBarHeight - statusBarHeight；

 

上述的默认导航栏的计算能够直接根据小程序的wx.getSystemInfo接口来计算，看着是否是很轻松能搞定。如今咱们来看看自定义导航栏。

（2）自定义导航栏

小程序提供了能够定义导航栏接口：

app.json的window项中配置如下代码：

 

"navigationStyle": "custom"

 

配置自定义导航栏以后的效果图：

自定义导航栏中wx.getSystemInfo的 screenHeight和windowHeight的值是一致的。此时，咱们没办法计算导航栏高度了。可是通过简单的线下数据采集，获得了大部分热门的手机导航栏高度数据（totalBarHeight)。

 

1. 大部分手机的导航栏高度（totalBarHeight)

 

iPhone： 64px;
iPhone： 88px;
android： 68px;
samsung： 72px;

 

2. 状态栏高度可根据systemInfo中statusBarHeight值获取；

3. 标题的高度(titleBarHeight) = totalBarHeight - statusBarHeight；

 

自定义导航栏实现后效果图:

3. 小程序插件能够自定义导航栏吗？

上述的都是小程序的自定义导航栏用法，有同窗提问了小程序插件中可否自定义导航栏呢？

答案是固然是能够的。插件中自定义导航栏没办法像小程序里统一设置，可是能够在每一个页面的json文件中单独配置，其余的步骤和小程序的自定义导航栏一致：

 

 

"navigationStyle": "custom"

 

 

 

参考文章连接：

高适应性的自定义导航栏开发思路

微信小程序自定义导航栏

腾讯位置服务路线规划插件