小程序自定义导航栏_navigationStyle

参考：https://www.cnblogs.com/wangzirui98/archive/2019/07/26/11249317.html

参考：https://www.mk2048.com/blog/blog.php?id=c1cakc0cbckj&title=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E6%A0%8F_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