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>
ジェソン:
{
"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);
}
})
},