小程序自定义导航栏

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

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

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

开始自定义导航栏

了解规则

iPhone X ： 导航栏高度 44 、 状态栏高度 44 、tabBar高度 83

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

自定义组件

app.wxss 添加page属性

 1 page {
 2   position: absolute;
 3   top: 0;
 4   bottom: 0;
 5   height: 100%;
 6   background-color: #f8f8f8;
 7   font-size: 32rpx;
 8   color: #333;
 9   display: flex;
10   flex-direction: column;
11 }

页面使用2层流式布局　　

1 <view >
2     <view class='navigation'></view>
3     <view class='container'></view>
4 </view>

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

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

navigation组件
1.js

 1 setNavigation(){  
 2     let startBarHeight = 20
 3     let navgationHeight = 44
 4     let that = this
 5     wx.getSystemInfo({
 6       success: function (res) {
 7         console.log(res.model)
 8         if (res.model == 'iPhone X'){
 9           startBarHeight = 44
10         }
11         that.setData({
12           startBarHeight: startBarHeight,
13           navgationHeight: navgationHeight
14         })
15       }
16     })
17   },

2.wxml

1     <view class='navigation'>
2       <view class='startBar' style='height:{{startBarHeight}}px'></view>
3       <view class='navgation' style='height:{{navgationHeight}}px'></view>
4     </view>

最后封装成组件即可

写在最后

感觉这个玩意还是官方给的香，如果现在项目用起来就自己封装一个用吧。
期待出单页面设置navigationStyle