小程序自定义导航栏
- 微信提供自定义导航栏说明
- 开始自定义导航栏组件
微信提供自定义导航栏说明
- 微信版本
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.jssetNavigation(){ 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