uni-app currentWebview.setTitleNViewButtonStyle

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app currentWebview.setTitleNViewButtonStyle

p.nvue 页面中，原页面page.json配置的的button的txt 为下一步

通过如下修改text
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview();
currentWebview.setTitleNViewButtonStyle(0, {text:“完成”})

结果
1、界面上已经更改了。
2、异常：onNavigationBarButtonTap事件中，获取到的还是下一步，这个地方并不是“完成”

问题：
为什么界面变化了，但是 onNavigationBarButtonTap 事件中并未变化


Harmonyos Next教程
8 回复

界面变化了，事件回调没有变化，具体是回调参数有问题，还是延迟获取有问题？是否可以提供单页面源码，用来说明对你的问题，你提供的带帽看点是调用了对应的 api，完整的代码补充一下，并说明 vue 和HBuilderX 版本


1、HBuilderX 4.29 2、nvue 3、pages.json 配置一个页面，的右上角button按钮， { “path”: “pages/index/index”, “style”: { “navigationBarTitleText”: “uni-app”, “app-plus”: { “titleNView”: { “buttons”: [{ “type”: “none”, “fontSize”: “26rpx”, “text”: “下一步”, “width”: “100px” }] }

4、在 index.nvue 中的onload 周期里面写上 主要的作用就是修改右上角这个按钮的的文字 let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentWebview = page.$getAppWebview(); currentWebview.setTitleNViewButtonStyle(0, {text:“完成”});

这个执行完成后，在真机运行的界面上会看到 “下一步”，变成了 “完成”

5、在index.nvue 加上事件 ,当点击右上角的按钮时触发 onNavigationBarButtonTap(e){ //这里打印出来的还是 “下一步” ，而不是"完成"; //期望值是 完成，而不是下一步 console.log(e); }

完整的，测试项目，
只有一个nvue页面，一个page 其他全部官方默认项目文件 见附加：Text.rar

是的，我复现了此问题

在处理 uni-app 开发中的 currentWebview.setTitleNViewButtonStyle 方法时，我们主要是用于自定义导航栏（NView）上按钮的样式。这个功能在需要高度自定义应用界面时非常有用。以下是如何在 uni-app 中使用 currentWebview.setTitleNViewButtonStyle 的一个代码示例。

首先，确保你的 manifest.json 文件中已经启用了自定义导航栏功能。在 app-plus 配置项下添加或确认以下设置：

"app-plus": {
    "distribute": {
        "apple": {},
        "google": {}
    },
    "nvue": {
        "flex-direction": "column"
    },
    "usingComponents": true,
    "window": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#007aff",
        "custom": true // 确保这里设置为 true
    }
}

然后，在你的页面脚本中，可以使用 currentWebview.setTitleNViewButtonStyle 方法来设置按钮样式。这里是一个简单的示例：

// 假设这是在页面的 onLoad 或其他合适的生命周期函数中
export default {
    onLoad() {
        // 获取当前页面的 webview 对象
        const currentWebview = plus.webview.currentWebview();

        // 设置导航栏右侧按钮的样式
        currentWebview.setTitleNViewButtonStyle({
            right: {
                text: '设置', // 按钮文本
                fontSize: '18px', // 字体大小
                color: '#ffffff', // 文字颜色
                width: '80px', // 按钮宽度
                backgroundColor: '#ff0000', // 背景颜色
                borderRadius: '5px' // 圆角半径
            }
        });

        // 设置导航栏左侧按钮的样式（如果需要）
        currentWebview.setTitleNViewButtonStyle({
            left: {
                text: '返回',
                fontSize: '18px',
                color: '#ffffff',
                width: '80px',
                backgroundColor: '#00ff00',
                borderRadius: '5px'
            }
        });

        // 监听按钮点击事件
        currentWebview.addEventListener('titleNViewButtonClick', (e) => {
            if (e.buttonIndex === 0) {
                console.log('左侧按钮被点击');
                // 这里可以添加返回上一页的逻辑，例如：uni.navigateBack()
            } else if (e.buttonIndex === 1) {
                console.log('右侧按钮被点击');
                // 这里可以添加打开设置页面或其他功能的逻辑
            }
        });
    }
}

以上代码展示了如何在 uni-app 中使用 currentWebview.setTitleNViewButtonStyle 方法来自定义导航栏按钮的样式，并监听按钮的点击事件。注意，这里的 buttonIndex 是基于 0 的索引，0 表示左侧按钮，1 表示右侧按钮。根据实际需求，你可以进一步调整样式和事件处理逻辑。

回到顶部