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. 【实时渲染】3DCAT实时渲染云在BIM领域的应用

    很多人不知道实时渲染云在BIM领域都有哪些应用,今天3DCAT就为大家整理了一篇关于实时渲染云在BIM领域的应用介绍的文章.我们将会从什么是BIM.BIM在协作方面的挑战.3DCAT的解决方案及3DC ...

  2. 浅析倾斜摄影三维模型(3D)几何坐标精度偏差的几个因素

    浅析倾斜摄影三维模型(3D)几何坐标精度偏差的几个因素 倾斜摄影是一种通过倾斜角度较大的相机拍摄建筑物.地形等场景,从而生成高精度的三维模型的技术.然而,在进行倾斜摄影操作时,由于多种因素的影响,导致 ...

  3. | [0/8] Installing jquery@3.x[npminstall:get] retry GET https://registry.npm.taobao.org/jwebdriver after 100ms, retry left 4, error: Error: certificate has expired ClientRequest.<anonymous>

    昨天用开源项目UIRecorder初始化时报错,查看日志发现是淘宝的源证书过期,如下: PS E:\20231213\uirecorder\uirecorder_test> PS E:\2023 ...

  4. Prism框架的用法

    今天,我向大家介绍一款WPF后台框架,以及,它的用法. 官网 https://prismlibrary.com/ Prism 框架是一个用于构建松耦合.可维护且可测试的 WPF 和 Xamarin.F ...

  5. 记录--vue脚手架

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.vue脚手架 1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统. 2.命令行操作步骤 npm install ...

  6. 【FastDFS】面试官:如何实现文件的大规模分布式存储?(全程实战)

    写在前面 在<[FastDFS]小伙伴们说在CentOS 8服务器上搭建FastDFS环境总报错?>一文中,详细的介绍了如何在CentOS 8服务器行搭建FastDFS环境.在生产环境中, ...

  7. flink scala 从Oracle同步数据到MySql

    pom <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> ...

  8. wire和reg型变量的组合使用

    模型功能 实现寄存器之间的连线 实现寄存器的声明 建构时钟的时序系统 模型框图 `timescale 1ns / 1ps /* */ // ****************************** ...

  9. KingbaseES Json 系列十:Json数组构造函数

    KingbaseES Json 系列十--Json数组构造函数(ARRAY_TO_JSON,JSONB_BUILD_ARRAY,JSON_ARRAY,JSON_BUILD_ARRAY) JSON 数据 ...

  10. RSA进阶(一)

    本篇为RSA进阶篇,继RSA入门 [RSA3]P1(扩展欧几里得) 题目 from Crypto.Util.number import * flag = b'******' m1 = bytes_to ...