微信小程序胶囊按钮返回详细说明|首页自定义导航栏功能

编辑：宝哥软件园来源：互联网时间：2021-08-22

新天龙八部

角色扮演 | 1.85G

评分

立即下载

项目代码：https://github.com/Shay0921/header-navbar.git

在小程序中，可以从转发的小程序消息卡进入，因为页面堆栈中只有一个按钮，所以不会有返回按钮。对于一些电商平台来说，当商品被转发时，会影响客户对其他产品和主页的查看。此时，您需要使用自定义导航栏编写一个“胶囊按钮”。如下图所示：

从其他页面指向商品页面会有后退和首页按钮；

从分享页面进入商品页面时，只有一个页面栈，所以只有首页按钮；

首先，我们需要如何打开自定义导航栏。查看手册后，我们会发现一个页面配置项：navigationStyle

在之前的版本中，这个配置项只能在app.js中配置，是全局属性，但是现在可以在单独页面的json中配置，实现单独页面的自定义导航栏。

整体思维

当使用navigationStyle:custom时，将删除以前的顶部标题栏，右胶囊按钮将固定在右上角。然后，三个视图(状态栏、标题栏和主要内容)被添加到当前页面。可以看到三块的布局。我直接写死高度：状态栏20px，标题栏44px。这是自定义导航栏的关键，需要计算这两块的高度和back | home胶囊按钮的位置。在基础库2.1.0的开始，可以使用wx . getmenubuttonboundingclienter()获取右侧胶囊按钮的位置信息，有了这个信息，我们就可以相对计算出左侧想要添加的胶囊按钮的位置。使用wx.getSystemInfoSync()中的statusBarHeight来查找状态栏的高度。

目录结构

组件组件 headerNavbar顶级自定义导航栏页眉navbar.js 页眉navbar.json 页眉navbar.wxml 页眉Navbar。Page 索引主页index . jsindex . JSONindex . wxmlindex . wxssnavigation style是一个介绍自定义导航栏的页面navigation style . jsnavigation style . JSON \\\\

app.js

在app.js中，您必须首先获取状态栏高度和正确的胶囊位置信息

app({ on launch : function(options){//这里省略了登录、获取用户信息等功能//，因为我在其他页面也需要用到这些信息。因此，状态bar heightwx . getsystem info({//获取设备信息成功3360 (RES)={this。globaldata.systeminfo=RES})不是单独获取的。})//获取胶囊按钮位置信息这个。global data . headerbnposi=wx . getmenubuttonboundingclient()}、global data : { system info 3360 }、//system information headerbnposi : }//胶囊按钮位置信息}})在这里，我们要注意wx . getmenubutboundingclient()，它的用法类似于object wx.getSystmInfo，而不是有success回调函数。

组件代码

headerNavbar.wxml

！-自定义导航栏-view class=' nav bar-wrap ' style=' height : { { nav bar height } } px；' padding-top : { { status barheight } } px；'view class=' nav bar-text ' style=' line-height : { { nav bartn . height nav bartn . top } } px；'{{navbarData.title？navbarData.title : '默认标题' } } { { NavBarheight } }/view view class=' NavBar-icon ' wx : if=' { { NavBarData . show capsule？nav bardata . show capsule : true } } ' style=' top : { { nav barbtn . top status barheight } } px；left : { { NavBarBtn . right } } px；height : { { NavBarBtn . height } } px；'image wx : if=' { { HaVeback } } ' bind tap=' _ GoBack ' class=' FloatL ' src=' http :/img/nav bar _ back _ white . png '/image view wx : if=' { { HaVeback } } ' class=' FloatL '/view image bind tap=' _ GoHome ' src=' http 3360/img/nav bar _ home _ white . png '/image/view/view！-手写加载-view class=' nav bar-loading ' style=' height : { { nav bar height } } px；line-height : { { NavBarHeight } } px；'文本./text/view为了适应不同的手机屏幕，需要在html中指定胶囊按钮的高度和位置。下面将详细解释如何计算高度。自定义导航栏组件分为两部分，一部分是顶部的导航栏，另一部分是加载。

因为自定义导航栏是固定在顶部的，为了保证下面的主要内容不被遮挡，我们需要在导航栏和主要内容之间增加一个与导航栏高度相等的高度。类被称为box first。这确保了导航栏不会阻止主要内容。然而，还会有另一个问题。如果此页面支持下拉刷新，导航栏会屏蔽小程序原有的加载样式，主内容前面会出现一个空白框。虽然不影响使用，但对用户来说会很奇怪，莫名其妙地多余。这只箱子只有在装货后才会上升。因此，您需要手写一个加载动画效果，并将其放在组件的底部，与导航栏的高度相同。

你可以在下面看到最终效果。蓝色导航栏下面的三个点是小程序的原生加载，接下来的三个小点是自己编写的加载。

我们想要的效果是，当使用小程序的本机加载时，我们自己编写的加载可以代替本机加载

headerNavbar.js

状态栏高度=app . global data . system info . status barheight

需要注意的是，胶囊位置信息的原点在页面左上角，需要将原胶囊位置信息转换为胶囊，转换后的称为当前胶囊。

/* * * iPhone 6的胶囊位置信息* wx . getmenubbuttonboundingclient()坐标信息以屏幕左上角为原点*胶囊宽度：87*胶囊高度：32*胶囊左边界坐标：278*胶囊上边界坐标：26*胶囊右边界坐标：365*胶囊下边界坐标：58*状态栏高度：20

当前胶囊的上边距=胶囊上边界的坐标-状态栏的高度

当前胶囊的右边界=屏幕宽度-胶囊右边界的坐标

当前胶囊底部边缘=胶囊底部边界坐标-胶囊高度-状态栏高度

导航栏高度=胶囊下边界坐标，现在是胶囊下边界

注意：胶囊下边界坐标包括状态栏、胶囊高度以及状态栏和胶囊高度之间的距离。因为胶囊在导航栏中居中，上下边距要一致，所以是胶囊下边界坐标-胶囊高度-状态栏高度。

const app=GetApp()；组件({ properties : { nav bardata : }//由父页面传递的数据type: Object，value: {}，observer: function (newVal，oldVal) { }，data: { haveBack: true，//是否有返回按钮，真的有错误的没有若从分享页进入则为false statusBarHeight: 0，//状态栏高度navbarHeight: 0，//顶部导航栏高度nabbartn : {//胶囊位置信息高度： 0,宽度： 0,顶部： 0,底部： 0,右侧： 0 } }, //微信7.0.0支持wx。getmenubuttonboundingclientrect()获得胶囊按钮高度附带：函数(){让status barheight=app。全球数据。系统信息。状态栏高度/状态栏高度让header posi=app。全球数据。标题rbtnposi/胶囊位置信息/* * * wx。getmenubuttonboundingclientrect()坐标信息以屏幕左上角为原点* 菜单按键宽度： 87 * 菜单按键高度： 32 * 菜单按键左边界坐标： 278 * 菜单按键上边界坐标： 26 * 菜单按键右边界坐标： 365 * 菜单按键下边界坐标：58 */让btnPosi={ //胶囊实际位置，坐标信息不是左上角原点高：头高，宽：头宽，//胶囊顶部状态栏高度顶部：头rposi。顶部状态栏高度，//胶囊底部胶囊高度-状态栏高度（现胶囊底部为距离导航栏底部的长度)底部：表头位置。底部标题位置。高度-状态栏高度，//屏幕宽度-胶囊右： app。全球数据。系统信息。屏幕宽度-标题位置。右}让haveBack if (getCurrentPages().长度===1) { //当只有一个页面时have back=false } else { have back=true }这。setdata({有回：有回，//获取是否是通过分享进入的小程序状态栏高度：状态栏高度，导航条高度：标题rposi。底部btnposi。底部，//原胶囊底部现胶囊bottom navbartn : btnPosi })}，methods : { _ go back : function(){ wx。navigateback({ delta : } 1 })；}，gohome :函数(){ wx。switch选项卡({ URL : '/page/index/index '，})；} }})通过getCurrentPages()来判断当前页面是否从分享页进入，因为如果从分享页进入页面栈中应该只有一条数据，在跳转到其他页面时页面栈的长度则会增加，在其他页面就会显示出返回和首页按钮。

注意：微信7.0.0支持wx。getmenubuttonboundingclientrect()，如果想兼容低版本的微信，只能把导航栏的高度写死，通过一些大佬的计算得出的高度：

iPhone': 64，

iPhone X': 88，

安卓： 68

具体查看：

https://开发者。微信。QQ。com/community/developer/doc/0006 c 012 DC 8028 f 04 b 070 DD 0551004

如果你使用wx。getmenubuttonboundingclientrect()得到信息有小数，如下所示

{高度： 24,宽度： 65.25,顶部： -0.5,底部： -0.5,右侧： 101.25}

那么你可能是把开发工具中的视图缩放了，还原成100%就正常了。

headerNavbar.wxss。navbar-wrap {位置：固定；宽度： 100%;top : 0；z指数： 9999999；背景色-: # 3281 ff；盒子尺寸：边框盒子；}.导航栏-文本{ text-align : centerfont-size : 36rpxcolor : # fff font-weight : 600；}.nav bar-图标{位置：固定；display : flex border-radius : 64 rpx；border: 0.5px固体rgba(255，255，255，0.3)；盒子尺寸：边框盒子；}.导航条-图标图像{高： 20像素宽度： 20pxpadd : 5px 10px 10pxdisplay :内联块；飞越：隐藏；}.导航条-图标视图{高： 18pxborder-left: 0.5px实心rgba(255，255，255，0.3)；边距-top : 6px；}.导航条-正在加载{ background: # fff文本对齐：中心；}引用组件页面代码

navigationStyle.json

{ 'navigationStyle': 'custom '，' enablepulldownlrefresh ' : true '，' backgroundTextStyle ' : ' light '，'使用组件' : ' { '页眉导航栏' : '/'组件/页眉导航栏/页眉导航栏' }}首先将navigationStyle:custom添加到需要使用自定义导航栏的json页面

启用下拉刷新： true以打开下拉刷新

BackgroundTextStyle:灯是将加载的样式改为白色，这样加载的三个点就不会显示了

navigationStyle.wxml

header nav bar nav bar-data=' { { nvabardata } } '/header nav bar view class=' home-page '上面的文字是自定义导航栏/下面的文字文字是主要内容/文字导航器URL='。/testpage '跳转到测试页/navigator/view navigation style . js。

page({ data : {//parameter nvabardata 3360 { show capsule 3360 1，//是否在左上角显示capsule button 1，显示0，不显示title : ' component list '//title在导航栏中间})}，onpulldown refresh(){ settimeout(()={ wx . Stop .//Stop下拉}，2000)；}，})注意：虽然这在小程序开发工具中看起来是正确的，但得到的导航栏高度也是64px，但在真机上测试后，还是有偏差的，iphone8 plus上的高度是60px。