小程序篇 - uni-app自定义标题栏样式适配问题

我们自定义标题栏先要设置 navigationStyle: ‘custom’ 设置过后只会保留胶囊
其他的可以自由发挥咯
json

"pages": [
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "健康管理",
			"navigationStyle": "custom"
		}
	}
]

html：页面自定义标题栏

<view class="doctor-title" :style="{marginTop: statusBarHeight + 'px'}" @click="back">
	<van-icon name="arrow-left" color="#ffffff" size="20px" />
	<text>标题</text>
</view>

js部分
使用uni.getSystemInfoSync()去获取手机默认导航高度，uni-app自己提供的--status-bar-height在不同的手机发现还是有点偏差

<script>
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

css部分

.doctor-title{
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	z-index: 2;
	text-align: left;
	height: 44px;
	line-height: 44px;
	padding-left: 30upx;
	color: #fff;
}

好啦，标题栏样式就可以完美解决啦，有问题留言区讨论~