一般在nuiapp的pages.json配置路由时是这样的
在style的里面加上 "navigationStyle": "custom" //代表自定义头部
在配置好了之后在你想自定义的页面添加
<template>
<view>
<view class="header" :style="style">
<view class="flexbox"
:style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleColor, 'background': bgColor}]">
<view @click="goBack" style="font-size: 36rpx;">
<u-icon name="arrow-left"></u-icon>
</view>
<view>提交驳回原因</view>
<view style="width: 36px;"></view>
</view>
</view>
</view>
</template>
然后就是data
data() {
return {
statusBarH: 0,
customBarH: 0,
titleColor: '#000',
bgColor: '#fff'
}
},
created() {
let self = this;
uni.getSystemInfo({
success: function(e) {
self.statusBarH = e.statusBarHeight + 10
self.customBarH = e.statusBarHeight + 46
}
})
}
然后就是css
.header {
width: 100vw;
}
.flexbox {
display: flex;
justify-content: space-between;
padding: 0 8rpx;
}
就可以运行出来了