小程序自定义导航栏

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

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

微信版本6.60window下的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 = 20let navgationHeight = 44let that = thiswx.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>

最后封装成组件即可

写在最后

感觉这个玩意还是官方给的香，如果现在项目用起来就自己封装一个用吧。

期待出单页面设置navigationStyle