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

const app = getApp();
Component({
 properties: {
 navbarData: { // 由父页面传递的数据
 type: Object,
 value: {},
 observer: function (newVal, oldVal) { }
 }
 },
 data: {
 haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
 statusBarHeight: 0, // 状态栏高度
 navbarHeight: 0, // 顶部导航栏高度
 navbarBtn: { // 胶囊位置信息
 height: 0,
 width: 0,
 top: 0,
 bottom: 0,
 right: 0
 }
 },
 // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
 attached: function () {
 let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
 /**
 * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
 * 菜单按键宽度： 87
 * 菜单按键高度： 32
 * 菜单按键左边界坐标： 278
 * 菜单按键上边界坐标： 26
 * 菜单按键右边界坐标： 365
 * 菜单按键下边界坐标： 58
 */
 let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
 height: headerPosi.height,
 width: headerPosi.width,
 // 胶囊top - 状态栏高度
 top: headerPosi.top - statusBarHeight,
 // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
 // 屏幕宽度 - 胶囊right
 right: app.globalData.systeminfo.screenWidth - headerPosi.right
 }
 let haveBack;
 if (getCurrentPages().length === 1) { // 当只有一个页面时
 haveBack = false;
 } else {
 haveBack = true;
 }
 this.setData({
 haveBack: haveBack, // 获取是否是通过分享进入的小程序
 statusBarHeight: statusBarHeight,
 navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
 navbarBtn: btnPosi
 })
 },
 methods: {
 _goBack: function () {
 wx.navigateBack({
 delta: 1
 });
 },
 _goHome: function () {
 wx.switchTab({
 url: '/pages/index/index',
 });
 }
 }
})

.navbar-wrap {
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 9999999;
 background-color: #3281FF;
 box-sizing: border-box;
}
.navbar-text {
 text-align: center;
 font-size: 36rpx;
 color: #fff;
 font-weight: 600;
}
.navbar-icon {
 position: fixed;
 display: flex;
 border-radius: rpx;
 border: 0.5px solid rgba(255,255,255, 0.3);
 box-sizing: border-box;
}
.navbar-icon image {
 height: 20px;
 width: 20px;
 padding: 5px 10px 10px;
 display: inline-block;
 overflow: hidden;
}
.navbar-icon view {
 height: 18px;
 border-left: 0.5px solid rgba(255,255,255, 0.3);
 margin-top: 6px;
}
.navbar-loading {
 background: #fff;
 text-align: center;
}

{
 "navigationStyle": "custom", 
 "enablePullDownRefresh": true, 
 "backgroundTextStyle": "light", 
 "usingComponents": {
 "headerNavbar": "/components/headerNavbar/headerNavbar"
 }
}

<headernavbar navbar-data="{{nvabarData}}"></headernavbar> 
<view class="home-page"> 
 <text>
 上面是自定义导航栏↑↑↑
 </text> 
 <text>
 下面是主体内容↓↓↓
 </text> 
 <navigator url="./testPage">
 跳转到测试页
 </navigator> 
</view>

Page({
 data: {
 // 组件所需的参数
 nvabarData: {
 showCapsule: 1,
 // 是否显示左上角胶囊按钮 1 显示 0 不显示
 title: '组件列表' // 导航栏 中间的标题
 }
 },
 onPullDownRefresh() {
 setTimeout(() = >{
 wx.stopPullDownRefresh(); // 停止下拉
 },
 2000);
 },
})