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