详细代码请见github，请点击地址，其中有原生小程序的实现，也有wepy版本的实现

了解小程序默认导航

如上图所示，微信导航分为两部分，第一个部分为statusBarHeight，刘海屏手机（iPhone X，小米8等）会比其他的手机高很多，第二部分为titleBarHeight，安卓和IOS的高度不同，但是IOS高度是一样的，IOS高度是一样的,

所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statusBarHeight和titleBarHeight

第一步：全局设置

把app.json中的window中的navigationStyle设置为custom，官方文档链接

设置完之后发现导航栏变成了如下图所示，只剩下了右上角胶囊按钮

第二步：确定导航栏两部分的高度

（1）确定第一部分statusBarHeight的高度，这部分是手机用来展示时间，信号和手机电量的，我们可以从wx.getSystemInfo从获得

wx.getSystemInfo({success: function(res) {console.log(res.statusBarHeight)}
})

（2）第二部分titleBarHeight为小程序导航栏的高度，经过我查询无数文档和实践得知，在iPhone上titleBarHeight=44px，在安卓上titleBarHeight = 48px

（3）最后总结一下微信小程序的高度代码为

wx.getSystemInfo({success: function(res) {let titleBarHeight = 0if (res.model.indexOf('iPhone') !== -1) {titleBarHeight = 44} else {titleBarHeight = 48 } that.setData({ statusBarHeight: res.statusBarHeight, titleBarHeight: titleBarHeight }); }, failure() { that.setData({ statusBarHeight: 0, titleBarHeight: 0 }); } })

第三步：编写Navigation组件

（1）Navigation.js

const app = getApp();
Component({properties: {//小程序页面的标题title: {type: String,default: '默认标题'},//是否展示返回和主页按钮showIcon: {type: Boolean,default: true}},data: {statusBarHeight: 0, titleBarHeight: 0, }, ready: function () { // 因为每个页面都需要用到这连个字段，所以放到全局对象中 if (app.globalData && app.globalData.statusBarHeight && app.globalData.titleBarHeight) { this.setData({ statusBarHeight: app.globalData.statusBarHeight, titleBarHeight: app.globalData.titleBarHeight }); } else { let that = this wx.getSystemInfo({ success: function(res) { if (!app.globalData) { app.globalData = {} } if (res.model.indexOf('iPhone') !== -1) { app.globalData.titleBarHeight = 44 } else { app.globalData.titleBarHeight = 48 } app.globalData.statusBarHeight = res.statusBarHeight that.setData({ statusBarHeight: app.globalData.statusBarHeight, titleBarHeight: app.globalData.titleBarHeight }); }, failure() { that.setData({ statusBarHeight: 0, titleBarHeight: 0 }); } }) } }, methods: { headerBack() { wx.navigateBack({ delta: 1, fail(e) { wx.switchTab({ url: '/pages/main/main' }) } }) }, headerHome() { wx.switchTab({ url: '/pages/main/main' }) } } })

(2) Navigation.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"><view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"><view wx:if="{{showIcon}}" class="title-bar"><view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view><view class="line"></view><view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view></view><view class="header-title">{{title}}</view></view>
</view>

css就不贴了，有点多，需要的朋友可以去的github上拿点击地址

第四步：展示效果

iPhone X展示效果 iPhone 7展示效果

小米8展示效果

用我们公司的测试机基本上都试了一遍，基本上都能正常显示，别问我为什么样式和右边这么相似，因为我是叫公司设计给了我样式

解决下拉刷新的问题

图一为默认导航下的下拉刷新，显示正常，图二为自定义导航栏下的下拉刷新，显示异常，中间有一大块空白。

如果解决这个问题，我们自定义一个加载动画，藏在导航底下

（1）把app.json中的window设置为如下，这样加载动画就隐藏了，因为加载动画必须要设置window的backgroundTextStyle=black和backgroundColor=#F3F3F3才会显示如上图所示

window: {
"navigationStyle": "custom",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "ICY买手店",
"navigationBarTextStyle": "black"
}

（2）修改Navigation.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"><view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"><view wx:if="{{showIcon}}" class="title-bar"><view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view><view class="line"></view><view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view></view><view class="header-title">{{title}}</view></view><view class="loading-wrap"><image class="loading-gif" src="https://dn-testimage.qbox.me/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view>
</view>

效果如下图，加载动画我可能写的不太好看

问题：这样做在iPhone上是能正常展示的，但是在安卓上还有一点小问题，自定义导航栏的标题和图标有一起滑动

注意点

（1）安卓手机下拉刷新还是会有一点点展示问题

（2）项目所有fixed的元素都需要改，top需要加上导航栏的高度

目前哪些小程序在用自定义导航栏

我所知道的有 “bilibili”，"票圈长视频"，我们公司的小程序也在计划用

转载于:https://www.cnblogs.com/mianbaodaxia/p/10103933.html

自定义微信小程序导航（兼容各种手机）相关推荐

使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
rax自定义微信小程序导航栏
一.导航栏样式背景: 接到一个需求,需要自定义微信导航栏,并且展示如上图存在各种样式: 难点: 兼容IOS刘海屏,IOS药丸屏,安卓无框屏.H5正常屏幕.小程序退出后台不随页面滚动: navigat ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
八月微信小程序导航：官方文档+精品教程+demo集合（8月25...
2019独角兽企业重金招聘Python工程师标准>>> 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=147643467846 ...
微信小程序-导航吸顶+view锚点
微信小程序--导航吸顶+view锚点导航栏滑动定位+view锚点效果图实现原理 WXML WXSS JS-主页面子页面-newcontent 导航栏滑动定位+view锚点我们在做小程序的时候 ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序导航条配置图片背景
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊,其他页面纯色导航条(沿用微信那套) 相关代码如果你觉得写的不错或者帮到你了,记得给我点个赞哟~ 微信小程序导航条配置图片背景需要实 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序客服系统手机版五大功能介绍
很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时 ...

自定义微信小程序导航（兼容各种手机）