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

自定义效果图比如这样 小程序自定义导航栏 + 加菜单功能

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

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

这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问:小程序自定义导航栏 + 加菜单功能

一、如何自定义:

    1.打开app.json  如下箭头所示小程序自定义导航栏 + 加菜单功能

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

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

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

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

        

//获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
    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。