参考：https://www.cnblogs.com/wangzirui98/archive/2019/07/26/11249317.html
小程序自定义导航栏
- 微信提供自定义导航栏说明
- 开始自定义导航栏组件
微信提供自定义导航栏说明
- 微信版本
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