uni 自带的 navigation bar 对于普通的导航需求是够用的,也允许 onNavigationBarButtonTap 加点击事件。

但是会出现异常Bug,表现为在内部页面一番操作后,再返回到主页,主页导航上的 onNavigationBarButtonTap 点击无效。

你也能在社区看到这些问题似乎一直存在:https://ask.dcloud.net.cn/question/63407

另一方面是  onNavigationBarButtonTap 本身限制目前只支持 APP、H5。

一种解决方式是 使用 u-navbar,pages.json 中自定义导航设置,局部如下:

{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom" ,
"navigationBarTextStyle": "white"
}
}
]
}

然后在 vue 页面中使用 u-navbar,组件不带有事件,但是我们可以在外包一层 <view @click='xx'> 加上 click 事件来解决。

<view @click='navbarTap'>
<u-navbar
:is-back="false"
:border-bottom="false"
:background="backgroundColor"
:title="navbarTitle"
title-width="320rpx"
title-color="white"
>
</u-navbar>
</view>

我们也不再是使用 uni.setNavigationBarTitle 来设置导航文字,赋值组件上使用的变量就可以了。

Refer:uViewUI常见问题

Link:https://www.cnblogs.com/farwish/p/14128464.html

[FE] uViewUI u-navbar 曲线解决 uni onNavigationBarButtonTap 的限制与失效的更多相关文章

  1. 解决NGINX的WORDPRESS伪静态规则失效的问题

    解决NGINX的WORDPRESS伪静态规则失效的问题 前两天搬到了EMSVPS的PR线路上,用上了最新的WDCP2.0管理面板,支持多用户管理(我们几个合租的VPS,最需要这个功能了),感觉很不错, ...

  2. 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

  3. liunx之:解决liunx下dns配置重启失效的问题

    有时候能ping同ip地址,却ping不通域名,这就是dns没有配置的缘故. 但是DNS配置文件 /etc/resolv.conf 每次重启就会失效. 打开这个配置文件,发现有注释提示: Dynami ...

  4. 移动表格行 解决低版本IE fadeIn fadeOut 失效问题

    在维护一个内部使用的web工具的时候,需要在表格里配置参数,并且支持参数列的上下移动,有jQuery-UI工具支持对表格列的拖动,但是此处不追求效果,而且旧系统页面兼容性很差,无奈只能做上下移动的按钮 ...

  5. 解决dropdownlist postback 在 iphone UIwebview 失效的问题

    原因: IPhone UIWebView 的 用户代理 User Agent 在ASP.NET 4.0环境下是不识别的:所以ASP.NET提供了一个默认的,低级的不包括javascript的页面版本 ...

  6. ss 如何解决margin-top使父元素margin失效

    给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...

  7. 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)

    在一个项目中,为了系统执行效率更快,把一个经常用到的数据库表通过dataset放到Application中,发现在异步实现中每一次都会出现HttpContext.Current为null的异常,后来在 ...

  8. 解决overflow: hidden在移动端失效问题

    1.问题:移动端出现弹窗后,滑动页面,页面底部出现空白 二.原因 经过分析,发现overflow: hidden;在移动端失效,导致弹窗出现时,滑动页面,页面底部出现空白. 三.解决 参考网址:htt ...

  9. 解决IOS移动端固定定位失效问题

    根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用. <div class="header">头部</ ...

  10. 解决:angularjs radio默认选中失效问题

    添加ng-model后checked="checked"失效,可见angularjs也不好,会失效html标准属性   解决:添加ng-checked="1" ...

随机推荐

  1. 检验实时3D像素流送平台好坏的七个标准!(下)

    上篇文章我们介绍了<检验实时3D像素流送平台质量的七个标准>中的前四个标准,本文我们将继续给您介绍检验像素流送平台质量的其他三个标准. 您的平台是通过云还是仅通过渲染的图像传输数据? 您的 ...

  2. 3DCAT亮相WAIC 2022浦东分会场——元宇宙博览会暨数字光影大会

    以"智联世界 元生无界"为主题的2022世界人工智能大会于9月3日下午圆满闭幕.与此同时,由上海市多媒体行业协会.深圳市数字创意与多媒体行业协会主办,上海天盛会展有限公司承办的WA ...

  3. 首届实时渲染3D动画创作大赛结果公布,看大奖英伟达A6000花落谁家!

    根据评选标准,经过评委组层层选拔,首届实时渲染3D动画创作大赛,最终获奖结果出炉啦. 本次赛事报名人数达212人,入围作品共40份,其中Omniverse组11份,专业组15份,学生组14份.在宣布最 ...

  4. 记录--Three.js的简单使用,Three.js在vue3.x中导入.pcd三维模型文件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本文说明 本文主要简单介绍了,在Vue3.x项目中如何简单的使用Three.js,导入PCD三维模型文件. 模型显示 项目实现 第一步 首 ...

  5. 如何打造一个花里胡哨的Github个人主页?

    1.介绍 2.使用 2.1.创建一个同名仓库 2.2.引用模板 2.3.为内容添加有趣模块 2.3.1.徽章badge 2.3.2.waka 时间展示 2.3.3.展示 GitHub stars 等信 ...

  6. 在 Google Colab 中使用 JuiceFS

    Google Colaboratory(Colab)是一个由 Google 提供的云端 Jupyter 编程笔记本,直接通过浏览器即可进行 Python 编程.Colab 充分利用谷歌的闲置云计算资源 ...

  7. 补充--关于nginx服务器多个网站如何设置404的问题?

    补充--关于nginx服务器多个网站如何设置404的问题? 需求1 :设置多个网站404页面为一个 都需配置网站的nginx.conf,以上面的多网站为例,404发布目录下,每个的nginx.conf ...

  8. Redis 中 scan 命令太坑了,千万别乱用!!

    作者:铂赛东\链接:www.jianshu.com/p/8cf8aac3dc25 1 原本以为自己对redis命令还蛮熟悉的,各种数据模型各种基于redis的骚操作.但是最近在使用redis的scan ...

  9. 把分钟数转化成几小时几分钟(100 -> 01:40)

    /// <summary> /// 把分钟数转化成几小时几分钟(100 -> 01:40) /// </summary> /// <param name=" ...

  10. Python爬虫爬取ECVA论文标题作者摘要关键字等信息并存储到mysql数据库

    网站截图: 源代码: 1 import re 2 import requests 3 import pymysql 4 from bs4 import BeautifulSoup 5 import l ...