小程序自定义单页和全局导航栏实现代码

需求

产品说小程序不方便返回首页。如果要添加按钮返回首页，UI说导航栏可以设置背景图片，因为看起来不错。

需求分析和计划制定

这个产品和UI都有需求，你无法反驳，那就开始研究分析可行性方案；1.您可以添加一个浮动按钮。2.自定义导航栏。添加悬停按钮看似简单，但感觉没那么优雅，占用页面空间，体验不是很好。于是我想到了第二个方案。定制导航栏既能满足产品的需求，又能满足UI设计的美感。在顶部空白处添加一个返回首页的按钮，与返回按钮对称(最后如图，顶部导航栏为背景图片，分为两块)。

实施方案

一、实现的前提

1.首先查看文档，看看文档中自定义导航栏是如何规定的，有哪些限制；还有微信版的小程序自定义导航栏全局配置和单页配置，以及最低支持版本的调试库。

2.将navigationStyle:custom添加到app.json窗口，顶部导航栏将消失，只留下右上角的胶囊按钮。如何修改胶囊的颜色；目前胶囊体只支持黑白。将“导航栏文本样式”:“白色/黑色”添加到应用程序窗口

3.还可以考虑增加后退按钮和后退按钮，以适应不同的型号

我们来谈谈以下两种配置方法：

全局配置导航方式：

调试基本库=1.9.0

微信客户端=6.6.0

app.json

{ '使用组件' : { ' navigation bar ' 3360 '/组件/navigationbar/navigationbar'}，'窗口' : { ' navigation style ' : ' custom ' } }单页配置导航样式

调试基本库=2.4.3

微信客户端版本=7.0.0

定制页面。数据

{ ' window ' : { ' navigation style ' : ' default ' } } { ' navigation style ' : ' custom '，' using components ' : { ' navigation bar ' : '/components/navigation bar/navigation bar ' } }的区别在于全局配置放在app.json文件中，单页配置放在自定义页面配置文件中。二、实现的步骤

我们来谈谈以下几点：

1.自定义导航栏文本，是否显示返回，是否显示返回主页和导航栏高度

2.statusBarHeight用于获取手机状态栏的高度。这需要通过在global app.js的onLaunch中调用wx.getSystemInfo来获取，并设置navigationBarHeight的默认高度。

3.还要注意的是，在书写样式距离和大小时建议使用px，因为小程序右侧的胶囊也使用px，而不是rpx。

4.因为自定义导航栏的每一页都需要编写，导航栏是用公共组件封装的，所以只需要引入到每一页。

以下是封装的导航栏组件：

页面结构

view class=' nav bar ' style=' { ' height : ' navigationBarHeight } } ' view style=' { ' height : ' status barheight } } '/view view class=' title-container ' view class=' capsule ' wx : if=' { { back | | home } } ' view bind tap=' back ' wx : if=' { { back } } ' images src='/images/back . png '/image/view view bind tap='背景：白色/view这里有一个需要注意的问题，就是通常会出现一个自定义的导航栏，下拉页面和导航栏也会随之下拉。这个问题是因为在设置固定后整个页面元素已经上移了navigationBarHeight，所以在这个组件中设置了一个空白的视图元素来占据顶部的navigationBarHeight wxss。nav bar { width : 100%；背景色： # 1797 EB；位置：固定；top : 0；left : 0；z-index : 999；}.标题-容器{ height: 40pxdisplay: flexalign-items:居中；相对位置：}.胶囊{ margin-left : 10px；height: 30px背景： rgba(255，255，255，0.6)；border: 1px实心# fffborder-radius : 16px；display: flexalign-items:居中；}.胶囊视图{ width: 45px高度：60%；相对位置：胶囊视图： th-child(2){ border-left : 1px solid # fff；}.胶囊图像{宽度：50%；高度： 100%；绝对位置：左侧：50%；top : 50%；transform: translate(-50%，-50%)；}.标题{ color:白色；绝对位置：top: 6pxleft: 104pxright: 104pxheight: 30px线高： 30px；font-size : 14px；文本对齐：中心；飞越：隐藏；文本-overflow:省略号；white-space : nowrap；}js

const app=GetApp()Component({ properties : { text : { type : String，value: '微信' })，back: { type: Boolean，value: false }，home: { type: Boolean，value: false } }，data 3: { status barheight : app . global data . status barheight ' px '，navigationBarHeight:

{'component' : true，' using components ' : { } }最后，我们需要考虑版本兼容性的问题。毕竟还有一部分用户的微信版本没有更新到最新版本。首先可以在app.js中获取当前用户的微信版本，进行版本对比。如果比这个版本小，可以设置一个全局变量，或者在组件中编写一个方法，在不同的页面上打开并显示不同的顶部导航栏，也可以控制是否显示导航栏。这里就不细说了。

我自己也试过。7.0以下的微信版本，如果使用单页自定义导航栏，会出现两个导航栏。此时，通过判断版本号停止渲染自定义导航栏组件，并在页面配置文件中写入标题名称和对应的背景色，这样导航栏就会显示出来。

摘要

小程序开发有点坑。可以看到它正在从支持自定义导航栏慢慢提升到支持全局自定义导航栏，现在支持单页配置。还有一个底部的tabbar，可以自己配置的太少了。虽然也支持定制，但是发现定制编写的底部导航组件体验并不好，每次打开页面都会重新渲染底部的按钮。如果所有的按钮都写在一页的tab switch里，虽然不需要每次都重新加载按钮，但肯定没有什么业务，单页写的东西太多了。希望微信可以增加或者发布更多的功能，让开发者更好的服务产品，给用户更好的体验。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。