小程序自定义并自适应顶部标题

wxml：

<view class="nav" style="padding-top: {{ statusBarHeight }}px; height: {{ navBarHeight }}px;">
    <text>自定义标题</text>
</view>

wxss：

.nav {
    text-align: center;
}

.nav text {
    line-height: 72rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #2A2929;
}

js:使用顶部标题适配各大机型

Component({
    properties: {},
    data: {
        statusBarHeight: wx.getSystemInfoSync().statusBarHeight,
        navBarHeight: 0
    },
    methods: {
    },
    attached() {
        const wxMenu = wx.getMenuButtonBoundingClientRect()
        const statusBar = wx.getSystemInfoSync().statusBarHeight
        const navigationBar = (wxMenu.top - statusBar) * 2 + wxMenu.height
        this.setData({ navBarHeight: navigationBar })
    }
})

注册并使用：（我一般是全局注册）

"usingComponents": {
    "nav":"/components/nav/nav/nav"
  },

  在页面json文件中配置 "navigationStyle": "custom"

 {
  "usingComponents": {},
  "navigationStyle": "custom"
}

使用

<nav></nav>

 机型：iphoneX