小程序自定义顶部导航栏

对于自定义导航栏，需要在全局配置文件中 app.js 中，window下修改 navigationStyle 属性的默认值。导航栏样式（navigationStyle），仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮

详情见小程序API

对于不同的手机尺寸屏幕，顶部导航栏的高度不同。需要根据手机屏幕大小，动态计算手机顶部导航栏高度。

 {

 'iPhone': 64,

 'iPhone X': 88,

 'android': 68

 }

例如：

 

在小程序页面加载之前，会首先运行 app.js 文件中 onLaunch 【当小程序初始化完成时，会触发 onLaunch（全局只触发一次）】。通过调用小程序API ：wx.getSystemInfo，获取到手机设备信息,比如：状态栏高度，且通过设备高度计算出对应的导航栏高度。

app.js

onLaunch: function() {
    const vm = this
    wx.getSystemInfo({
      success: function(res) {
        let totalTopHeight = 68
        if (res.model.indexOf('iPhone X') !== -1) {
          totalTopHeight = 88
        } else if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 64
        }
        vm.globalData.statusBarHeight = res.statusBarHeight
        vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
      },
      failure() {
        vm.globalData.statusBarHeight = 0
        vm.globalData.titleBarHeight = 0
      }
    })
  },

JS:

onReady: function () {
    const vm = this
    vm.setData({
      statusBarHeight: getApp().globalData.statusBarHeight,
      titleBarHeight: getApp().globalData.titleBarHeight
    })
  },

HTML:

<view class="container" style="padding-top:{{statusBarHeight+titleBarHeight}}px">
  <view class="header">
    <view class="status-bar" style="height:{{statusBarHeight}}px"></view>
    <view class="title-bar" style="height:{{titleBarHeight}}px">
      <input type='text' confirm-type="search" class="input-text" placeholder-class="place-holder" placeholder='搜索你想要的商品' bindconfirm="search" bindinput="getval" style='width:60%;height:50rpx;padding:0 0 0 32rpx;margin-left:20rpx;font-size:20rpx;border-radius:6rpx;background:#999;'/>
    </view>
  </view>
</view>

CSS:

page {
  height: 100%;
}
.container {
  box-sizing: border-box;
  height: 100%;
  background: rgba(0, 255, 0, 0.1);
}
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 255, 0.1);
}
.status-bar {
  background: rgba(255, 0, 0, 0.1);
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}