uni-app onNavigationBarButtonTap只能修改一次titleNView

uni-app onNavigationBarButtonTap只能修改一次titleNView

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

{
    "path": "pages/settings/account-management/account-management",
    "style": {
        "enablePullDownRefresh": false,
        "navigationBarTextStyle": "black",    
        "navigationBarTitleText": "账号管理",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "fontSize":"32rpx",
                        "text": "编辑",
                        "color": "#000",
                        "float": "right"
                    }
                ]
            }
        }
    }
}

页面中使用：
```javascript
let status = ref<number>(1)
onNavigationBarButtonTap((e) => {
        console.log(e)
        let pages = getCurrentPages();
        var page = pages[pages.length - 1];
        var currentWebview = page.$getAppWebview();
        var tn = currentWebview.getStyle().titleNView;
        console.log(tn)
        if (status.value == 1) {
            status.value = 0
            tn.buttons[0].text = '完成';
            currentWebview.setStyle({
                titleNView: tn
            });
        } else{
            status.value = 1
            tn.buttons[0].text = '编辑';
            currentWebview.setStyle({
                titleNView: tn
            });
        }
    })

操作步骤：

  • 按上述代码写入

预期结果：

  • 点击编辑，text切换成完成，点击完成再切换成编辑

实际结果：

  • 只能切换成完成，再次点击无法触发onNavigationBarButtonTap事件

bug描述：

  • 在onNavigationBarButtonTap事件中改变titleNView的text属性，只能触发一次

更多关于uni-app onNavigationBarButtonTap只能修改一次titleNView的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

用这个设置一次后就不能触发onNavigationBarButtonTap了，去掉就是正常的 currentWebview.setStyle({ titleNView: tn });

更多关于uni-app onNavigationBarButtonTap只能修改一次titleNView的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已解决，解决办法，重启电脑，今天早上一来打开电脑测试正常了，绷不住

在 uni-app 中，onNavigationBarButtonTap 是用于监听导航栏按钮点击事件的生命周期函数。它主要用于处理导航栏按钮的点击事件，而不是直接用于修改 titleNView 的配置。

如果你想要动态修改导航栏的标题或其他配置，可以通过 uni.setNavigationBarTitle 或 uni.setNavigationBarColor 等 API 来实现。

1. 修改导航栏标题

uni.setNavigationBarTitle({
  title: '新的标题'
});

2. 修改导航栏背景颜色

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景颜色，包括标题和按钮颜色
  backgroundColor: '#ff0000' // 背景颜色
});

3. 修改导航栏按钮

uni-app 中没有直接修改导航栏按钮的 API，但你可以通过动态改变 pages.json 中的配置来实现。通常需要在页面跳转时提前配置好导航栏按钮。

4. onNavigationBarButtonTap 的使用

onNavigationBarButtonTap 主要用于监听导航栏按钮的点击事件：

export default {
  onNavigationBarButtonTap(e) {
    console.log('导航栏按钮被点击', e);
    // 你可以在这里处理按钮点击事件
    if (e.index === 0) {
      uni.showToast({
        title: '按钮1被点击',
        icon: 'none'
      });
    } else if (e.index === 1) {
      uni.showToast({
        title: '按钮2被点击',
        icon: 'none'
      });
    }
  }
}
回到顶部