小程序自定义导航栏

微信提供自定义导航栏说明
开始自定义导航栏组件

微信提供自定义导航栏说明

微信版本 6.60
window下的 navigationStyle 属性，设置为 custom 即可关闭原生头部导航，但会保留椭圆形菜单。
Tip 暂时不支持单页面设置 navigationStyle 属性

开始自定义导航栏

了解规则

iPhone X ：导航栏高度 44 、状态栏高度 44 、tabBar高度 83
其他机型：导航栏高度 44 、状态栏高度 20 、 tabBar高度 49

自定义组件

app.wxss 添加page属性

page {  position: absolute;  top: 0;  bottom: 0;  height: 100%;  background-color: #f8f8f8;  font-size: 32rpx;  color: #333;  display: flex;  flex-direction: column;}

页面使用2层流式布局

view     view class='navigation'/view    view class='container'/view/view

container使用布局 flex:1这个一定要加上

.container{  flex: 1;  display: flex;  flex-direction: column;  position: relative;}

navigation组件
1.js

setNavigation(){      let startBarHeight = 20    let navgationHeight = 44    let that = this    wx.getSystemInfo({      success: function (res) {        console.log(res.model)        if (res.model == 'iPhone X'){          startBarHeight = 44        }        that.setData({          startBarHeight: startBarHeight,          navgationHeight: navgationHeight        })      }    })  },

2.wxml

    view class='navigation'      view class='startBar' style='height:{{startBarHeight}}px'/view      view class='navgation' style='height:{{navgationHeight}}px'/view    /view

最后封装成组件即可