使用uview配置自定义导航栏(踩坑记录)

最新推荐文章于 2024-04-12 03:32:08 发布
最新推荐文章于 2024-04-12 03:32:08 发布
阅读量5.1k 收藏 7
点赞数 8
分类专栏： js 文章标签： uview vue uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongkongyu/article/details/119735964
版权

今天用uview做了一个自定义导航栏，发现无论怎样都不能跳转，也无法点击，我翻遍文档都没找到原因，最终在一个示例中发现，不只是要在自己的组件或页面配置list，也要在pages.json里配置一次，pages.json的list里必须要有pagePath和text。
在这里插入图片描述
更多内容大家可以前往我的个人博客浏览：eyes++的个人空间

耶瞳
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
微信小程序(uniapp + uView)自定义导航栏
02-29
微信小程序(uniapp + uView)自定义导航栏
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
10-16
对于一些电商平台来说，当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏自己写一个“胶囊按钮”。这篇文章主要介绍了详见微信小程序胶囊按钮返回|首页自定义导航栏,需要的朋友可以参考下
uniapp使用 uview-plus 底部导航栏(vue3项目)_uniapp底部导航栏
最新发布
2401_84182793的博客
04-12 486
*说明：**如果直接在tabbar组件中定义active变量，active变量在每次切换时会被重置，因使用的组件中会使用tabbar组件，导致组件维护的active出现两份。所以在pinia中定义默认选中的索引，组件之间数据共享。
解决uview+uni-app框架写的H5应用嵌入到【企业微信】中顶部导航栏显示两次的问题
有问题可关注公众号：前端研究院 后台输入问题回复
05-26 1068
解决： 找到App.vue页面，把底部的"正式打包隐藏顶部导航栏"注释解开，那么逻辑就是我们打包的时候顶部导航栏就没有了(因为开发过程中要把这个注释掉，不然你浏览器上没有顶部导航不好调试、、然后打包的时候去掉注释就可以了、)，只有一个企业微信读取一次，不会出现两次的情况。 过程： 由"图1"到"图2" ...
# uni-app开发-实战总结 # 顶部导航栏制作（uView）
ZHENGCHUNJUN的博客
08-25 5685
<!-- 页面顶部导航栏 --> <view> <u-navbar title="我的赞" title-color="#25AFA2" back-icon-name="nav-back" back-icon-color="#25AFA2" back-text="返回"> </u-navbar> </view> 本文的顶部导航栏为使用uView的导航栏组件------Navbar..
关于 uview-ui 组件自定义导航栏字体颜色
小白兔奶糖の博客
07-31 4063
此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。提示右侧的演示中，导航栏上方有圆角，也有顶部的手机模型状态栏内容，以及返回图标和文字不对齐的情况。这是因为网页演示导致，实际中无此情况，请通过右上角的“演示”扫码查看实际效果。此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。提示右侧的演示中，导航栏上方有圆角，也有顶部的手机模型状态栏内容，以及返回图标和文字不对齐的情况。官网的就直接略过了...
uni-app 使用 Uview2.x 搭建自定义tabbar组件，自定义navbar，还会解决自定义导航栏引起闪烁性能差的问题！！！
柑橘乌云_
04-06 4599
根据需要修改了u-tabbar和u-tabbar-item宽度高度，这些基本属性在uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue和uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue中都有相应的注释，写得很清楚，自行修改就好。下面拿一个首页作为代码演示：（顶部自定义导航栏组件和底部导航栏组件会放在最后）下图组件没有引入,是使用了easyCom,
uni使用uview自定义导航栏
声声的博客
10-08 719
在page.json设置。
uni-app的自定义头部导航(基于uView 新)
weixin_40858306的博客
09-17 3651
从这个文章过渡，时间真快。https://blog.csdn.net/weixin_40858306/article/details/98208469#comments_16499427 本人使用的uni-app最新的自定义头部导航组件 基于uView。
uni-nav-bar自定义导航栏block不生效问题
LUCHIEMNG的博客
07-07 1604
uni app自定义导航栏 block slot="left"不生效解决
uniapp navigator跳转没反应
weixin_42277383的博客
06-14 280
navigator 属性
自定义导航栏（2）
01-21
对之前的版本做了简单修改，丰富了ViewFlipper做导航页面的效果
自定义实现底部导航栏(底部Tab)
11-02
自定义实现底部导航栏(底部Tab)和Android 底部导航栏中间凸起
HBuilderX项目配置使用uview
12-22
uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网...
uview 自定义导航栏
weixin_55774776的博客
05-17 3848
<u-navbar title="标题" :titleStyle="{ color: '#FFF', fontSize: '36rpx' }" bgColor=" #f77700" :autoBack="true" leftIconColor="#FFF" :placeholder="true" > <view class="u-nav-slot" slot="right">右边</v.
uview1.x自定义tabbar
热门推荐
xiaoququ的博客
08-24 1万+
在pages.json中正常定义tabbar逻辑和字段， 只需配置tabBar字段list中的pagePath属性即可 "list": [{ "pagePath": "pages/tabBar/Home/home" // "text": "首页", // "iconPath": "static/img/Home.png", // "selectedIconPath": "static/img/Home-select.png" }, { "pagePa.
[uni-app] web-view组件页面添加u-navbar, u-navbar无法显示问题处理
iOSTianNan的博客
06-28 2141
uni-app 内部调整H5页面 (webview组件),需要条件导航问题。在iOS/Android下, web-view占满了全屏,
uniapp 两个自定义导航栏或按钮 不能多次跳转问题
织网的博客
09-07 1213
uni.navigateTo 保留当前页。(不会关闭当前页)跳转到某个页面内。它会进行叠加，在h5与小程序上频繁互跳，就会出现不能跳转问题。uni.redirectTo关闭当前页面，跳转到应用内的某个页面。我这里使用的是 uviewui 路由跳转api -使用 uni.redirectTo可以解决这个问题。
uniapp中使用navigator无法跳转问题
m0_63853448的博客
11-04 2567
在uniapp中使用navigator出现无法跳转问题
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. 运行项目，即可看到自定义的底部导航栏了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值