问题描述
提示:这里描述项目中遇到的问题:
项目中遇到这样一个问题,用微信开发者工具打开的微信小程序标题是居中的,但是真机调试后标题默确是居左。后来查询了资料才知道这是uni默认安卓标题居左,苹果设备居中排(这…是对安卓用户特别的爱吗???)
解决方案:
关键词:这自定义标题、uView、
1.既然是要自定义导航栏,那么首先就要取消系统自带的导航栏,需要在uni-app的根目录的"pages.json"中设置
"pages": [
{
"path": "pages/tabbar/my/myTest",
"style": {
"navigationBarTitleText": "我的测试",
"navigationBarTextStyle": "white", // 状态栏字体为白色,只能为 white-白色,black-黑色 二选一
"navigationStyle": "custom" // 隐藏系统导航栏
}
},
]
2.在你的页面中试用uView自带的Navbar 自定义导航栏
<template>
<view>
<u-navbar
is-back="true"
:border-bottom="false" //是否显示导航栏左边返回图标和辅助文字
title-color="white"
:background="navbar_bg"
title="我的测试"
></u-navbar>
</view>
</template>
<script>
data: () => ({
navbar_bg: {
'background-color': 'transparent'
}
}),
</script>
3.这样标题就就可以去除uni的影响,在安卓和苹果上都可以居中了,如果对标题部分还有其它的要求可以在看下nView的官方文档