修改uniapp自定义导航栏uni-nav-bar标题字体样式

flower`

于 2024-04-10 11:24:00 发布

阅读量1.4k

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_48929505/article/details/137588605

版权

本文介绍了在Uni-App中，由于官方组件不支持修改标题大小，作者提供了一种方法，即使用/deep/深度选择器配合自定义CSS类，通过`<uni-nav-bar>`标签和Scss样式实现导航栏标题字体大小和颜色的修改。

摘要由CSDN通过智能技术生成

修改标题字体样式

如图：官方文档说明组件不支持修改标题大小，所以只有手动去控制标题样式
在这里插入图片描述

示例图： 改变导航标题字体大小和颜色

在这里插入图片描述
实现方法及代码示例：
使用/deep/ 深度选择器加自定义 class来控制导航栏标题样式

<template>
<view>
//给uni-nav-bar导航栏添定义个class 命名为.uni-nav-bar
<uni-nav-bar class="uni-nav-bar"   left-icon="left" :border="false" title="公告/通知">	</uni-nav-bar>
</view>
</template>
<style lang="scss" scoped>
  	//自定义uni-nav-bar导航栏标题样式
   /deep/ .uni-nav-bar .uni-nav-bar-text {
			font-size: 20rpx !important;
			color: red !important;
	}				
</style >