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

时间：2021-08-26 来源：互联网编辑：宝哥软件园浏览：次

1、发现问题

小程序页面的自定义导航栏功能已经打开有一段时间了(如果不知道这个功能，可以先了解一下)，大大增强了小程序开发的自由度。相信很多小伙伴都用过这个功能，也相信很多小伙伴在这个功能的开发过程中踩过同样的坑：

有很多型号：定制导航栏的高度在不同型号中无法实现视觉上的统一；淘气胶囊按钮：导航栏元素(文字、图标等。)无法匹配该死的胶囊按钮；各种大小的全屏，奇怪的刘海平，都快疯了。同样，这些问题格雷也经历过。但格雷认为，办法总比问题多，于是他开始了自己的探究：

2.发现

为了弄清楚如何适应，老规矩，我先翻了一波官方文件，且不说，官方还真有这么一段介绍相关细节的话，点击查看详情：

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

安卓与iOS的区别在于顶部与胶囊按钮的距离为6pt，胶囊按钮高度为32pt。iOS和安卓是一致的。好像没有刘亦菲的用处？这只是普通屏幕的参考，ipx和安卓全面屏完全没有介绍。冷静冷静，我们接着分析：

胶囊按钮到状态栏下边缘的距离似乎是固定的？安卓的这张图好像有点奇怪？导航栏分为状态栏标题栏？如果两个条件都成立，我们的问题会解决80%吗？然后让我们演示一下：

第一个问题：胶囊按钮到状态栏下沿的距离固定吗？

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

为了进行良好的测量，我们将状态栏的背景颜色设置为深色

Js代码：

var sysinfo=wx . getsysteminfosync()；这个。setdata({ status bar height : sysinfo。状态栏高度}) wxml代码：

view class=' status-bar ' style=' height : { { status-bar height } } px '/view wxss代码：状态栏{ background: rgb(141，71，71)；}渲染图(iPhone6):

渲染(iPhoneX):

渲染(安卓):

难道不是什么事情吗？是的，从截图可以看出，iOS是一样的，但安卓好像不一样。

距离是多少？我们用器物(微信截图)来衡量一个量：

安卓：

iOS:

可以看到iOS胶囊按钮与状态栏的距离为6px，安卓为8px，经过测量，iOS机型和安卓机型的结果是一致的(由于空间原因，截图不会一一显示，感兴趣的可以自行测量)

第二个问题：导航栏分为状态栏标题栏？

通过第一个问题的论证，很明显这是真的。而通过第一题的测量结果和官方数据，我们可以计算出标题栏的高度：

导航栏高度=胶囊按钮高度状态栏和胶囊按钮之间的距离* 2安卓导航栏高度=32px 8px * 2=48px iOS导航栏高度=32px 6px * 2=44px*注意：由于胶囊按钮是原生组件，其单位在每个系统中都是px，以获得持续的性能，因此我们定制的导航栏每个高度的单位必须是px(切记不要使用rpx)才能完美适配。

3.解决问题

通过以上分析，相信朋友们能有一个解决问题的思路。在编码之前，格雷会为大家画出要点：

编写自定义导航组件时，需要将组件结构分为两部分：状态栏标题栏的高度可以通过wx.getsysteminfosync()获得。statusbarheight: Android: 48px，iOS:44px单元必须和胶囊按钮一致，px里就不多说了，代码(gitHub地址):js:

组件({ properties : { background : { type : String，value: 'rgba(255，255，255，1)')})，color: { type: String，value: 'rgba(0，0，0，1 ')}，titleText: { type: String，value: '导航栏}，titleImg: { type: String，值： '' }，backIcon: { type: String，值： '' }，homeIcon: { type: String，值： '' }，fontSize: { type: Number，值3: 16 }，icon height 3360 { type 3: Number，值3:那。setnavsize()；那个。setstyle()；}，data: { }，methods: { //通过获取系统信息计算导航栏高度setNavSize:函数(){ var那=this，sysinfo=wx.getSystemInfoSync()，statusHeight=sysinfo。status barheight，isiOS=sysinfo。系统。indexof(' IOs ')-1，navHeightif(！isiOS){ nav高度=48；}否则{ navHeight=44}那。setdata({ status 3360 status height，navHeight: navHeight }) }，setstyle : function(){ var that=this，containers style，textStyle，iconStylecontainers style=[' background : ' that。数据。背景].联接(';');text STYLe=[' color : '表示。数据。颜色，‘字号：’那种。数据。字体大小' px '].联接(';');icon style=[' width : '那个。数据。图标宽度' px '，'高度： '表示。数据。图标高度' px '].联接(';');那个。setdata({ containers style : containers style，textStyle: textStyle，iconStyle: iconStyle }) }，//返回事件back:函数(){ wx。navigateback({ delta : 1 })这。triggerevent(' back '，{back: 1}) }，home:函数(){ this.triggerEvent('home '，{ })；} }})wxml:

view class=' nav ' style=' height : { { status navHeight } } px ' view class=' status ' style=' height : { { status } } px；{ { containers style } } '/view view class=' nav bar ' style=' height : { { nav height } } px；{ { containers style } } ' view class=' back-icon ' wx : if=' { { back icon } } ' bind tap=' back ' image src=' { { back icon } } '/image/view view class=' home-icon ' wx : if=' { { homeIcon } } ' bind tap=' home ' image src=' { { homeIcon } } /图像/视图[链接描述][10]view class=' nav-icon ' wx : if=' { { title img } } ' image src=' { { title img } } ' style=' { { icon style } } '/image/view class=' nav-title ' wx : if=' { { title text！ title IMg } } ' TExT style=' { { TExT style } } ' { { title TExT } }/TExT/view/view/view wxss:navbar{相对位置： }。后退图标主页图标{宽度： 28px高度： 100%;绝对位置：transform : translateY(-50%)；前：名50%；display: flex}。后退图标{ left: 16px}。主页图标{ left: 44px} .背面图标图像{ width: 28px高度： 28pxmargin: auto}。主页图标图像{ width : 20px h8 : 20pxmargin : auto }。导航标题导航图标{位置：绝对值；transform: translate(-50%，-50%)；左侧： 50%;前：名50%；font-size : 0；字体粗细：粗体；}运行效果图：