uniapp自定义导航栏

1.json文件添加"navigationStyle": “custom”

“path”: “pages/my/my”,
“style”: {
“navigationBarTitleText”: “uni-app”,
“navigationStyle”: “custom”,//设置自定义导航栏
}

2.dom元素

个人中心 34545 1888888888

3.js模块

data() {
return {
// 状态栏高度
height: 0
};
},
created() {
uni.getSystemInfo({
success: res => {
this.height = res.statusBarHeight
}
})
console.log(this.height)
},

4.css

.userinfo-top {
width: 100%;
height: 396rpx;
position: relative;
.title{
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
width: 100%;
position: absolute;
top: 0;
}
}