小程序自定义导航栏设置

为了摆脱小程序单一的顶部导航栏样式，添加更为炫酷的导航栏

• 设置导航栏宽高 （bug更新，ios真机上出现部分手机获取不到胶囊按钮信息的问题）

//建议全局设置,在app.js 生命周期函数onLaunch获取
//接下来，先获取系统信息
wx.getSystemInfo({
      success: e => {
        // console.log(e);
        const systemInfo = e;
        /**
         * 胶囊按钮信息 - 拼多多解决方法
         * 微信bug，存在获取胶囊按钮失败的bug
         */
        // 同步获取胶囊按钮信息 (优先缓存中获取)
        let custom_info = wx.getStorageSync('custom_info');
        let custom = null;
        // 胶囊按钮优先从缓存中获取
        if (custom_info) {
          custom = JSON.parse(wx.getStorageSync('custom_info'));
        } else {
          try {
            custom = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
            if (custom === null) {
              throw 'getMenuButtonBoundingClientRect error';
            }
            //取值为0的情况
            if (!custom.width) {
              throw 'getMenuButtonBoundingClientRect error';
            }
            wx.setStorageSync('custom_info', JSON.stringify(custom));
          } catch (error) {
            let gap = ''; //胶囊按钮上下间距 使导航内容居中
            let width = 96; //胶囊的宽度，android大部分96，ios为88
            if (systemInfo.platform === 'android') {
              gap = 8;
              width = 96;
            } else if (systemInfo.platform === 'devtools') {
              if (/IOS/i.test(systemInfo.system)) {
                gap = 5.5; //开发工具中ios手机
              } else {
                gap = 7.5; //开发工具中android和其他手机
              }
            } else {
              gap = 4;
              width = 88;
            }
            if (!systemInfo.statusBarHeight) {
              //开启wifi的情况下修复statusBarHeight值获取不到
              systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
            }
            custom = {
              //获取不到胶囊信息就自定义重置一个
              bottom: systemInfo.statusBarHeight + gap + 32,
              height: 32,
              left: systemInfo.windowWidth - width - 10,
              right: systemInfo.windowWidth - 10,
              top: systemInfo.statusBarHeight + gap,
              width: width
            };
            // console.log('error', error);
            // console.log( custom);
          }
        }
        // console.log(custom);
        this.globalData.custom = custom;
        this.globalData.customBar = custom.bottom + custom.top - e.statusBarHeight;
        this.globalData.statusBar = e.statusBarHeight;
        // 
        this.globalData.systemInfo = e
        // console.log(this.globalData.systemInfo)
        // 判断是否iphone x 11，留出底部安全距离
        const iphoneX = /iphone x/i.test(e.model);
        const iphoneNew = /iPhone11/i.test(e.model) && screenHeight === 812;
        this.globalData.isIPhoneX = iphoneX || iphoneNew;
      }
    })

3.实际操作,试下来个渐变色的导航栏
js

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

wxml

<view class='nav-custom' style='height:{{CustomBarHeight}}px'>
    <view class='naccustombar' style='height:{{CustomBarHeight}}px;
padding-top:{{statusBarHeight}}px;background-image:linear-gradient(45deg, #0081ff, #1cbbb4);'>
    </view>
 </view>
//app.wxss

app.wxss

/* 顶部导航栏 */
.nav-custom{
  display:block;
  position:relative;
}
.naccustombar{
  padding-right: 107px;
}