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 来设置导航文字,赋值组件上使用的变量就可以了。