小程序自定义导航栏 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=