uniapp-自定义导航栏样式不生效问题(一)

最新推荐文章于 2024-04-20 14:43:02 发布
最新推荐文章于 2024-04-20 14:43:02 发布
阅读量4.6k 收藏 2
点赞数 1
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45851435/article/details/118900771
版权

刚接触uniapp不久，这是我踩到的最心酸的坑T^T

1.我设置了一个自定义组件，用作导航栏，结果出bug了，如下图：
在这里插入图片描述
2.首先，h5端是完全没有问题的，可以正常显示，就是微信开发者工具排版错乱了

3.上百度排查了好久，为什么“uniapp自定义导航栏样式不生效”，“uniapp自定义导航栏需要注意什么”
重心都是在“自定义导航栏”上，结果做了很多无用功。

有一天改样式把 id 改成 class ，它奇迹般的可以了！！！
在这里插入图片描述
下面是在微信小程序性正常显示状态

最低0.47元/天 解锁文章
努力学习的小白T^T
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp自定义底部导航栏h5有效果小程序无效的解决方案
元宝的博客
04-20 4678
uniapp自定义底部导航栏小程序无效
uniapp组件自定义导航栏（vue父子通讯）
11-25
自定义导航栏组件是通过tabIndex下标来识别所触发的那一模块，为防止服务器压力大内含拦截功能，防止用户多次点击 ！！！此组件支持多端，内置配置demo！！！ ！！！喜欢就给点关注吧 嘻嘻嘻！！！
uniapp navigationStyle: custom 取消默认原生导航栏 导致页面顶部 进入状态栏区域问题
tengyuxin的博客
09-15 2635
关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网 全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。
uniapp开发微信小程序uview，u-navbar的custom-back无效问题
最新发布
feiyu的博客
04-20 240
环境：uniapp，微信小程序，uview1.x，vue2。
uniapp 自定义手机顶部状态栏不生效问题
༺墨༒眉༻
08-12 1333
项目是后来接手的，最终原因出在这， "immersed" : false=>设置为 true 就可以了，沉浸式样式。想要的效果想淘宝一样，底色覆盖到手机顶部，找了两天都没找到原因，过程很艰苦，直接上结果吧。
使用uniapp开发微信小程序时自定义tabBar警告Component is not found in path “custom-tab-bar/index“
vayne_1的博客
02-15 824
使用uniapp开发微信小程序时自定义tabBar警告Component is not found in path "custom-tab-bar/index"
uniapp问题：“navigationBarTextStyle“报错：Invalid prop: custom validator check failed for prop “navigat
zhufan2333的博客
07-21 853
将【pages.json】中的navigationBarTextStyle导航栏标题颜色修改为black/white即可。解决方法报错原因navigationBarTextStyle导航栏标题颜色仅支持black/white。不支持#fff等格式。
uni-app 支付宝小程序自定义顶部导航栏失效
好巧的博客
12-21 6372
支付宝小程序：picker Picker’s child must be an element: ，picker 不能直接写文字（< picker> 生日当天有惊喜），需要用< text> 或者 < view>包裹（< picker> < text>生日当天有惊喜 ）当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。...
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 ...
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
uniapp 自定义导航栏
08-18
uniapp 自定义导航栏
uniapp小程序 头部导航栏不显示
qq_53857666的博客
01-05 3938
uniapp 小程序头部导航栏不显示
uni-app 设置原生导航栏不显示
单飞吧的博客
10-16 7271
有两种方法：设置navigationStyle设为custom或titleNView设为false "pages" : [ { "path" : "pages/index/index", "style": { "navigationBarTitleText": "英特网络", // "navigationStyle":"custom" "app-plus":{ "titleNView":false } } }, ] 非H5端，手
android 公用标题栏,uniapp在IOS中动态设置标题栏按钮无效问题（android下有效）
weixin_39829574的博客
05-26 683
问题如题，详细如下描述，请大神帮忙解答。HBuilderX版本： 1.9.4.20190426app中一个新增会员和查看会员公用功能的页面，根据页面参数 动态设置按钮的js代码如下：computed: {shiftNavBtn(){// #ifdef APP-PLUSlet pages = getCurrentPages();let page = pages[pages.length - 1];l...
uniapp 自定义tabBar
YiYeZhiQiuDe_yzq的博客
12-19 1294
在工作过程中常常会遇到原生tabBar不适配项目UI的情况，这种时候就需要用到自定义tabBar了。在自定义tabBar组件内调用，在其他页面可能会失败。3、必须是uni.switchTab(OBJECT)的跳转方式。1、必须现在pages.json内注册barBar。下面就开始自定义tabBar的流程。以上为自定义tabBar的方法。在uniapp也有提到。
关于UNI-APP tabbar无法显示的坑
一只梦想当全栈工程师的程序猿
08-28 5462
uniapp上开发小程序的时候，查看了官网的文档配置设置tabbar，编译完全没问题，但是始终显示不出来，最后经过排查发现很诡异的问题，具体原理后续再问问吧。先上代码： { "pages": [{ "path": "pages/login/login", "style": {} }, { "path":"pages/index/index", "style":{ "navigationBarTitleText":"首页" } }, { "path": "pages/
UNIAPP----两种方法解决自定义tabbar，切换无卡顿白屏
weixin_44126737的博客
05-17 6223
说一下思路，代码后续贴 一：app，h5，小程序都可以 1，在pages.json里的tabbar，只留下pagePath，属性只留height：“0px”,意思为留下uni.switchtab跳转路径，不会闪屏白屏。但是高度为0px，看不到，也没给图标和文字。 2，使用uview 的自定义tabbar。笨方法：每个tabbar页面中都放置一次。点击不同tabbar，跳转不同tabbar——uni.switchtab。好方法：稍微封装个组件。各tabbar引入一次。 缺点:代码较多，不封装维护较乱。
微信小程序警告 Component is not found in path “custom-tab-bar/index”
m0_63969219的博客
06-01 2248
微信小程序警告 Component is not found in path “custom-tab-bar/index”
uniapp webview自定义导航栏
08-15
在UniApp中，可以通过以下步骤来实现自定义导航栏： 1. 创建一个组件用于自定义导航栏：在UniApp项目中，创建一个新的组件，例如`CustomNavBar.vue`。在该组件中，可以定义自己想要的导航栏样式和布局。 2. 在需要使用自定义导航栏的页面中引入组件：在需要使用自定义导航栏的页面中，引入上一步创建的`CustomNavBar`组件，并在页面的布局中使用该组件。例如，在`index.vue`页面中： ```html <template> <view> <custom-nav-bar title="自定义导航栏"></custom-nav-bar> <!-- 其他页面内容 --> </view> </template> <script> import CustomNavBar from '@/components/CustomNavBar.vue' export default { components: { CustomNavBar } } </script> ``` 3. 在自定义导航栏组件中添加样式和功能：在`CustomNavBar.vue`组件中，可以添加样式和功能，例如设置导航栏的背景颜色、文字颜色，添加返回按钮等。您可以根据自己的需求进行设计和修改。 这样就可以在UniApp中实现自定义导航栏了。您可以根据实际需求，在自定义导航栏组件中添加更多的样式和功能。 希望对您有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值