微信小程序顶部自定义基本上适配所以手机

1.先去设置顶部导航可以自定义
2.在app.js里面：
wx.getSystemInfo({
success: (e) => {
this.globalData.statusBar = e.statusBarHeight; //状态栏高度
let custom = wx.getMenuButtonBoundingClientRect(); //菜单按钮
this.globalData.custom = custom;
this.globalData.customBar = custom.bottom + custom.top - e.statusBarHeight;
}
})

3.新建一个构造器
wxml里面：

<view class="nav-back" style='top:{{statusBar}}px;' wx:if="{{icontext==1}}">
	<van-icon name="arrow-left" color="#5E4C4C" size="36rpx" bindtap="backpage" />
</view>
<view class='nav-title' style='top:{{statusBar}}px;' wx:if="{{navbartext !=''}}">{{navbartext}}</view>

js： const app = getApp() Component({ properties: { navbartext: { //由父页面传递的数据，变量名字自命名 type: String, value: "" }, icontext: { type: String, value: "" }, idno:{ type: String, value: "" } }, data: { statusBar: app.globalData.statusBar, customBar: app.globalData.customBar, custom: app.globalData.custom, height: '', }, attached: function() { // 获取是否是通过分享进入的小程序 this.setData({ share: app.globalData.share }) // 定义导航栏的高度 方便对齐 this.setData({ height: app.globalData.height }) }, methods: { backpage(){ wx.navigateBack({ complete: (res) => {

			},
		})
	}

}

})
css：
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
color: #000;
z-index: 9999999;

}

/* 标题要居中 */
.nav-title {
position: absolute;
text-align: center;
width: calc(100% - 340rpx);
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 60rpx;
font-size: 36rpx;
line-height: 60rpx;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.nav-back {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 60rpx;
font-size: 36rpx;
line-height: 60rpx;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
left: 10px;
display: flex;
align-items: center;
}
.border{
border-bottom: 1px solid #CCCCCC;
}

然后再自己的页面引入
js里面 height: app.globalData.customBar,
把height设置在自己的页面中来站位置，避免导航下面的内容被挡住或者其他方法都行