解决uniapp uview 自定义导航titile字体大小的方法

最新推荐文章于 2024-06-06 11:05:01 发布
最新推荐文章于 2024-06-06 11:05:01 发布
阅读量2.2k 收藏 2
点赞数 2
文章标签： uni-app vue.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61629497/article/details/128749207
版权

uview的自定义导航栏中的标题是不支持修改字体大小的这是因为

对于某一个组件当样式加上scoped后会出现 [data-xxxxx]无法直接修改类名，需要使用深度选择器覆盖

这样就可以穿透样式，但需要注意写法

原生CSS： >>>

less： /deep/

scss： ::v-deep

此时成功修改

技术不行但人小帅
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序(uniapp + uView)自定义导航栏
02-29
微信小程序(uniapp + uView)自定义导航栏
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uniapp 修改tabBar图标大小和navigationBar字体大小(转载，仅作记录)
沧笙踏歌的博客
05-23 9994
第一个 H5能用，实测微信小程序不能用，APP未测 //导航栏字体 .uni-page-head .uni-page-head__title { font-size: 15px !important; } // tab图标 .uni-tabbar .uni-tabbar__icon { width: 20px !important; height: 20px !important; } 转自 第二个 未测 在项目根路径下的App.vue文件，增加以下代码： <style lang="scss"
【uniapp】 uniapp 修改tabBar图标大小和navigationBar字体大小
m0_49714202的博客
01-06 4375
【uniapp】 uniapp 修改tabBar图标大小和navigationBar字体大小
UNIAPP修改原生导航栏样式，图标，文字，点击事件。
最新发布
weixin_71311086的博客
06-06 270
1.登录iconfont图标库网站找图标下载-iconfont-阿里巴巴矢量图标库。5.最后可以在页面中监测这个右侧按钮是否点击来继续后续操作-来到有这个导航栏的页面。4.点击下载文件结构下的index.html可以到浏览器查看下载图标格式。2.把下载解压的文件放在static文件下-里面文件结构如此。3.在pages.json文件下配置导航栏文字图标。
uniapp 修改navigationBar字体大小
weixin_44805839的博客
09-17 1万+
在app.vue中设置： uni-page-head{ height: 60rpx !important; } //字体 uni-page-head .uni-page-head__title{ font-size: 38rpx !important; line-height: 60rpx !important; font-weight: normal; } //顶部导航条高度 uni-page-head .uni-p...
uview2.0 tabs 使用fontsize修改菜单选中时的字体大小 滑块不居中问题
qq_45736656的博客
01-31 1873
使用css缩放将字体变大，不影响滑块居中。bug虽小，亦是头疼。
uniapp 修改tabBar图标大小和navigationBar字体大小
qq_37550440的博客
05-18 1万+
/deep/.uni-tabbar__bd .uni-tabbar__icon { width: $silu-base-element-tabicon-h25 }
uniapp+uview框架模板
12-03
uview UI框架则是uniapp的强力补充，它提供了一系列美观、一致的组件，如按钮、表格、导航栏、弹窗等，覆盖了大部分移动应用的需求。uview的设计理念是简单、实用，每个组件都经过精心设计和优化，以实现更好的性能...
uniapp使用uview组件实现省市区三级联动
06-29
在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。...
前端开发模板+基于uniapp和uview+悉地吧源码（含独立后端）+供前端开发学习
05-12
1，前端代码使用uniapp+uview构建，后端用的thinkphp开发！同时涵盖多端（APP，H5，小程序等） 2，功能主要有分类信息发布，朋友圈分享等，可以后台自行添加分类 3，可以前往微信小程序搜索“悉地吧”，体验各项...
设置导航栏的字体大小
05-07 1万+
uniapp实现全局设置字体大小，实现小中大的字体切换
qq_38118138的博客
05-11 6935
uniapp实现全局设置字体大小，实现小中大的字体切换
【uniapp】uniapp设置改变全局字体大小功能：
SunPeng的博客
03-18 3655
【uniapp】uniapp设置改变全局字体大小功能：
修改uniapp自定义导航栏uni-nav-bar标题字体样式
weixin_48929505的博客
04-10 925
修改uniapp自定义导航栏uni-nav-bar标题字体样式
如何修改uview中的u-button字体大小？
ll1027521的博客
11-01 3668
在u-view中要改变u-button的样式首先需要定义一个类名custom-style，然后，使用::v-deep.custome-style{ span{ font-size:10px; } }
修改uniapp自定义状态栏uni-nav-bar标题字体大小
珍惜时间
11-02 4882
当前组件不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式。
uni-app配置和修改原生导航栏按钮的文字/颜色等
热门推荐
qq_34430544的博客
07-06 1万+
待写
uniapp使用uview自定义底部导航栏
04-30
在uniapp中使用uView自定义底部导航栏的步骤如下： 1. 安装uView插件，在HBuilderX中打开项目，右键点击项目根目录，选择"插件安装"，搜索uView，安装并重启HBuilderX。 2. 在App.vue文件中引入uView组件库： ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` 3. 在pages.json中配置底部导航栏，如下所示： ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } } ], "tabBar": { "color": "#7A7E83", "selectedColor": "#007AFF", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home_active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabbar/mine.png", "selectedIconPath": "static/tabbar/mine_active.png" } ] } } ``` 其中，"tabBar"字段配置底部导航栏，"list"数组配置每个导航项的属性。 4. 在各个页面中添加导航栏的内容，如下所示： ```html <template> <view> <view>这是首页</view> </view> </template> <script> export default { data() { return { title: '首页' } }, onNavigationBarButtonTap() { uni.navigateTo({ url: '/pages/search/search' }); } } </script> ``` 其中，"data"中配置页面标题，"onNavigationBarButtonTap"函数配置导航栏右侧按钮的点击事件。 5. 在App.vue中配置全局导航栏样式，如下所示： ```scss <style lang="scss"> // 配置全局导航栏样式 .u-navbar { background-color: #007aff; color: #ffffff; } </style> ``` 6. 运行项目，即可看到自定义的底部导航栏了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值