[FE] uViewUI u-navbar 曲线解决 uni onNavigationBarButtonTap 的限制与失效

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

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

原文地址:https://www.cnblogs.com/farwish/p/14128464.html