小程序自定义导航栏 + 加菜单功能

自定义效果图比如这样 

如果不自定义效果图就是这样：打开第二页就会有个返回键

这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问：

一、如何自定义：

    1.打开app.json  如下箭头所示

    2.如果你自定义导航栏了，整个小程序就会沉浸到这个手机，整个手机屏幕都会是小程序。

    3.如果你你的导航栏是公用的，可以开发个组件。

    4.既然你是自定义导航栏 就需要解决手机适配的问题，每一款的手机导航栏可能不一样。

 

这里重新阐述一下  如果你想做的精确一些 还是用  获取微信胶囊的api来计算距离  

1.Object wx.getMenuButtonBoundingClientRect()

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

2.也可以根据机型来计算距离

//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
    wx.getSystemInfo({
      success: (res) => {
        let totalTopHeight = 68//安卓
        if (res.model.indexOf('iPhone X') !== -1) {
          totalTopHeight = 88//iphone x
        } else if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 64 //iphone
        }
        this.globalData.phoneBarHeight = res.statusBarHeight
        this.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
        // console.log('整个：：'+totalTopHeight+'标题bar---'+this.globalData.titleBarHeight)
        // this.globalData.screenHeight = res.screenHeight
      }
    })

    5.你可以根据上面获取的手机导航栏高度 来处理 自定义的导航栏的样式，比如padding-top、height。