前言

本文主要给大家介绍了关于微信小程序自定义导航的相关内容，详细代码请见github，请点击地址（本地下载),其中有原生小程序的实现，也有wepy版本的实现

了解小程序默认导航

如上图所示，微信导航分为两部分，第一个部分为状态右侧，刘海屏手机(iPhone X，小米8等)会比其他的手机高很多，第二部分为标题栏高度，安卓和IOS的高度不同，但是IOS高度是一样的，IOS高度是一样的，

所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现状态栏右侧和标题栏高度

第一步：全局设置

把app.json中的窗户中的导航样式设置为习俗，官方文档链接

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

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

(1)确定第一部分状态栏右侧的高度，这部分是手机用来展示时间，信号和手机电量的，我们可以从wx.getSystemInfo从获得

wx。getsystem info({ success : function(RES){ console。日志(RES . status barheight)} })(2)第二部分标题栏高度为小程序导航栏的高度，经过我查询无数文档和实践得知，在苹果手机上标题栏高度=44px，在安卓上标题栏高度=48px

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

wx。getsystem info({ success : function(RES){让标题栏高度=0 if(RES . model。的索引(' iPhone ')！==-1){标题栏高度=44 }否则{标题栏高度=48 }那。setdata({状态栏高度： RES .状态栏高度，标题栏高度：标题栏高度})；}，失败(){那。setdata({状态栏高度： 0，标题栏高度： 0 })；}})第三步：编写航行组件

(1)导航

const app=GetApp()；组件({ properties: { //小程序页面的标题title: { type: String，default: '默认标题' }, //是否展示返回和主页按钮showIcon: { type:布尔值，default: true } }，数据： {状态栏高度： 0，标题栏高度： 0，0 }，} ready : function(){//因为每个页面都需要用到这连个字段，所以放到全局对象中if(app。全球数据应用。全球数据。状态栏高度应用程序。全球数据。标题栏高度){这个。setdata({ status bar height : app。全球数据。状态栏高度，标题栏高度： app。全球数据。标题栏高度})；} else { let那=这个wx。getsystem info({ success : function(RES){ if(！app。全球数据){ app。全局数据={ } } if(RES . model。的索引(' iPhone ')！==-1){ app。全球数据。标题栏高度=44 } else { app。全球数据。标题栏高度=48 } app。全球数据。状态栏高度=RES .状态栏高度。setdata({ status bar height : app。全球数据。状态栏高度，标题栏高度： app。全球数据。标题栏高度})；}，失败(){那。setdata({状态栏高度： 0，标题栏高度： 0 })；} }) })，方法： { header back(){ wx。navigateback({ delta : 1，fail(e){ wx。switch选项卡({ URL : '/pages/main/main ' })})})，header home(){ wx。切换选项卡({ URL : '/Pages/main ' })})))(2)导航。页面结构

视图样式=' height : { { TitleBarHeight } } px；padding-top : { { StatusBarHeight } } px ' view class=' header ' style=' height : { { TitleBarHeight } } px；padding-top : { { status barheight } } px ' view wx : if=' { { showIcon } } ' class=' title-bar ' view class=' back ' bind tap=' header back ' image src=' http :https://dn-testimage . qbox . me/Files/08/6b/086 b8 e 19 C7 a5a a a a 031 C4 df 31 ca 8 b 53 AC 22212 _ 644 . PNP有需要的朋友可以去github获取点击地址(本地下载)

第四步：展示效果

IPhone X秀效果

IPhone 7显示效果

小米8展示了效果

我基本用我们公司的测试机试了一次，基本能正常显示。不要问我为什么款式和对的那么相似，因为是我让公司设计给我款式的。

解决下拉刷新的问题

图1是默认导航下的下拉刷新，正常，图2是自定义导航栏下的下拉刷新，不正常，中间有一大块空白。

如果我们解决了这个问题，我们定制一个加载动画，并将其隐藏在导航下

(1)在app.json中设置窗口如下，这样加载动画就被隐藏了，因为窗口的backgroundTextStyle=black和backgroundColor=# F3F3F3必须设置为如上图所示的显示。

window : { ' Navigation style ' : ' custom '，' backgroundTextStyle ' : ' light '，' navigationBarBackgroundColor ' : ' # fff '，导航栏标题文本' : ' ICY买方商店'，'导航栏文本样式' :' black'} (2)修改Navigation.wxml

视图样式=' height : { { TitleBarHeight } } px；padding-top : { { StatusBarHeight } } px ' view class=' header ' style=' height : { { TitleBarHeight } } px；padding-top : { { status barheight } } px ' view wx : if=' { { showIcon } } ' class=' title-bar ' view class=' back ' bind tap=' header back ' image src=' http :https://dn-testimage . qbox . me/Files/08/6b/086 b8 e 19 C7 a5a a a a 031 DC 31 A8 b 53 AC 22212 _ 644 . PNP

问题：这在iPhone上可以正常显示，但在安卓上还是有一个小问题。自定义导航栏的标题和图标一起滑动

专心

(1)安卓手机下拉刷新还是会有一点显示问题

(2)项目所有的固定元素都需要改变，顶部需要加上导航栏的高度

哪些小程序当前正在使用自定义导航栏

我知道的是“哔哩哔哩”、“票圈长视频”，我们公司的小程序也计划使用

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。