微信小程序--自定义导航栏微信小程序

1.在app.json的window对象中定义导航的样式：

"window":{ "navigationStyle": "custom" },

2.现在app.json里定义

globalData: { userInfo: null, navHeight: 0 }

在app.json的onLaunch方法里面获取手机状态栏高度，全局定义导航高度navHeight：

// 获取手机系统信息 wx.getSystemInfo({ success: res => { //导航高度 this.globalData.navHeight = res.statusBarHeight + 46; }, fail(err) { console.log(err); } })

3.在需要导航的页面Page拿到全局变量导航高度：

const App = getApp(); Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ navH: App.globalData.navHeight }) }, })

4.页面
–wxml–

首页 class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y >

5.样式，可以写在app.wxss

.nav{ width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 10; } .nav-title{ width: 100%; height: 45px; line-height: 45px; text-align: center; position: absolute; bottom: 0; left: 0; z-index: 10; font-family:PingFang-SC-Medium; font-size:36rpx; letter-spacing:2px; } .nav .back{ width: 22px; height: 22px; position: absolute; bottom: 0; left: 0; padding: 10px 15px; } .bg-white{ background-color: #ffffff; } .bg-gray{ background-color: #f7f7f7; } .overflow{ overflow: auto; } .hidden{ overflow: hidden; }

6.最终界面
【微信小程序--自定义导航栏】