小程序自定义导航栏 navigationStyle - 好文

小程序自定义导航栏

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

* 微信版本 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>
最后封装成组件即可

写在最后

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

热门工具换一换