微信小程序学习第二课：微信小程序自定义顶部导航栏（兼容适配所有机型）

1、将

    const vm = this
    statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
    titleBarHeight:wx.getSystemInfoSync()['titleBarHeight']
    wx.getSystemInfo({
      success: function (res) {
          console.log(res);
        let totalTopHeight = 68;
        if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 44;
        }else{
            totalTopHeight = 48;
        }
        vm.globalData.statusBarHeight = res.statusBarHeight;
        vm.globalData.titleBarHeight = totalTopHeight;
      },
      failure() {
        vm.globalData.statusBarHeight = 0
        vm.globalData.titleBarHeight = 0
      }
    })

加入app.js onLaunch中；

2、在app.json文件中加入 "navigationStyle": "custom"

    "window": {
        "navigationBarBackgroundColor": "#2C5CFF",
        "navigationBarTextStyle": "white",
        "backgroundColor": "#2C5CFF",
        "backgroundTextStyle": "dark",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 100,
        "pageOrientation": "auto",
        "navigationStyle": "custom"
    },

3、将css文件加入app.wxss

/* app.css 全局css中设置样式 自定义头部*/
.headerdiy{position: fixed;width: 100%;top: 0;left: 0;height: 45px;z-index: 999;}
.headerdiy text{color: #fff;font-size: 34rpx;font-weight: 500;max-width: 280rpx;}
.empty_headerdiy{height: 45px;width: 100%;}
/* 带返回样式 */
.headtitle{font-weight: 400;text-align:left;padding-left:30px;}
.headgoback{position: absolute;width:30px;font-weight:500;margin-left:-20px;}
/* 不带返回样式 */
.headtitle1{color: #ffffff;font-weight: 400;text-align:left;padding-left:10px;}

4、将以下两个变量加入到页面控制的js的data中

    data: {
        statusBarHeight: app.globalData.statusBarHeight,
        titleBarHeight: app.globalData.titleBarHeight,        
    },

5、将以下代码放入wxml文件中

 
     {{'<'}}授权登录
   

如果像是主页面这样不需要返回上一页的页面，请把这段中

 {{'<'}}

删除，并把  class="headtitle" 改为 class="headtitle1"

6、备注：如果用后端控制改变导航顶部颜色参数  ，可以吧 background 后面的颜色代码变成变量；

                  如果用后端控制改变导航顶部字体颜色参数  ，可以吧 color 后面的颜色代码变成变量；

                  如果用后端控制改变导航顶部标题  ，可以吧 “授权登录” 变成变量；

 

希望大家喜欢！