微信小程序自定义页面标题

wxml:  建议封装成组件以便使用

<view class="nav" style='height:{{customObj.navTop}}px;'></view> //设置状态栏高度 
<view class='title' style="line-height:{{ customObj.jiaoH }}px"> //设置标题
    <i class="back" bindtap="back"
            style="background: url('/static/newquestion/arrow-left.png') no-repeat center"></i>
        食材详情
</view>

json：

{
    "navigationBarTitleText": "",
    "navigationStyle": "custom",  //关键
    "usingComponents":{
        "cart": "../../components/cart/cart",
        "make-model": "../../components/make-model/make-model",
        "fit-tab": "../../components/fit-tab/fit-tab"
    }
}

 js:

//js
data:{customObj: {}, //new},
onLoad: function (options) {
        let menuButtonObject = wx.getMenuButtonBoundingClientRect() //获取到右上角胶囊的布局位置信息
        wx.getSystemInfo({
            success: res => {
                let statusBarHeight = res.statusBarHeight,
                    navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
                    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;//导航高度
                this.setData({
                    customObj: { navHeight, navTop, windowHeight: res.windowHeight, jiaoH: menuButtonObject.height, sysHeight: res.windowHeight }
                })
            },
            fail(err) {
                console.log(err);
            }
        })
    },