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

 

Refer：uViewUI常见问题

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