uni-app onNavigationBarButtonTap 及使用 currentWeb.getStyle().titleNView 设置 button 问题

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

uni-app onNavigationBarButtonTap 及使用 currentWeb.getStyle().titleNView 设置 button 问题

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：Android

手机系统版本号：Android 14

手机厂商：小米

手机机型：小米 11

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

export function setNavBarRight({text, fontSrc = '', style = false, idx = 0}) {  
    let tStyle = style || {color: '#333333', fontSize: '14px'};  
    _setNavBarBtnStyle({text,fontSrc, tStyle, idx});  
}  

function _setNavBarBtnStyle({text,fontSrc, tStyle = {}, idx = 0}) {  
    console.error('setNavBarRight',text,fontSrc, tStyle, idx);  
    _initWebviewBtn().then(flag => {  
        console.error('==========',flag);  
        if (!flag) return;  
        console.log(tn);  
        console.log(tn.buttons);  
        console.log(!tn.buttons);  
        let titleBtn = ''  
        if(!tn.buttons) tn.buttons = [];  
        console.log(tn.buttons[idx]);  
        console.log(!tn.buttons[idx]);  
        if(!tn.buttons[idx]) {  
            tn.buttons.splice(idx,  
                0,  
                {  
                "text": text,  
                "fontSrc": fontSrc,  
                "color": tStyle.color,  
                "fontSize": tStyle.fontSize  
            }  
            )  
            titleBtn = tn.buttons[idx];  
        }else {  
            titleBtn = tn.buttons[idx];  
            if (text) titleBtn.text = text;  
            if (fontSrc) titleBtn.fontSrc = fontSrc;  
            if (tStyle.color) titleBtn.color = tStyle.color;  
            if (tStyle.fontSize) titleBtn.fontSize = tStyle.fontSize;  
        }  
        console.log(titleBtn);  
        tn.buttons[idx] = titleBtn;  
        currentWebview.setStyle({titleNView: tn});  
    });  
}  
function _initWebviewBtn() {  
    return new Promise(resolve => {  
        if (!currentWebview) {  
            let pages = getCurrentPages();  
            let page = pages[pages.length - 1];  
            if (page) {  
                let currentWeb= page.$getAppWebview();  
                tn = currentWeb.getStyle().titleNView;  
                currentWebview = currentWeb;  
                resolve(true);  
            } else {  
                resolve(false);  
            }  
        } else {  
            resolve(true);  
        }  
    });  
}

vue页面使用

onready(){  
setNavBarRight({  
                    text: '\uE610',  
                    fontSrc: "/static/icon_navbar.ttf",  
                    style: {color: '#333333', fontSize: '20px'},  
                    idx: 0  
                })  
                setNavBarRight({  
                    text: '\uE60D',  
                    fontSrc: "/static/icon_navbar.ttf",  
                    style: {color: '#333333', fontSize: '20px'},  
                    idx: 1  
                })  
}

操作步骤：

使用上述代码按钮文字只有刚刚加载完成出来一次，之后再进这个页面就不显示了，并且button的点击事件一直不生效

预期结果：

进入页面显示对应的文字按钮，onNavigationBarButtonTap点击事件可以使用

实际结果：

只有刚刚加载完之后才会生效，之后进入页面不生效，并且onNavigationBarButtonTap点击事件一直没发使用

bug描述：

let currentWeb= page.$getAppWebview();  
tn = currentWeb.getStyle().titleNView;  
if(!tn.buttons[idx]) {  
            tn.buttons.splice(idx,  
                0,  
                {  
                "text": text,  
                "fontSrc": fontSrc,  
                "color": tStyle.color,  
                "fontSize": tStyle.fontSize  
            }  
            )  
            titleBtn = tn.buttons[idx];  
        }else {  
            titleBtn = tn.buttons[idx];  
            if (text) titleBtn.text = text;  
            if (fontSrc) titleBtn.fontSrc = fontSrc;  
            if (tStyle.color) titleBtn.color = tStyle.color;  
            if (tStyle.fontSize) titleBtn.fontSize = tStyle.fontSize;  
        }  
        console.log(titleBtn);  
        tn.buttons[idx] = titleBtn;  
        currentWebview.setStyle({titleNView: tn});

使用上述方法添加button方法，在页面onready执行出来一次，并且onNavigationBarButtonTap()点击事件不生效


Harmonyos Next教程
1 回复

在 uni-app 中处理导航栏按钮点击事件以及自定义导航栏按钮，通常涉及到 onNavigationBarButtonTap 方法和使用 currentWeb.getStyle().titleNView 来设置按钮样式和功能。以下是一些具体的代码案例来展示如何实现这些功能。

1. onNavigationBarButtonTap 处理按钮点击事件

首先，确保你的 pages.json 文件中已经配置了导航栏按钮。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#007aff",
        "app-plus": {
          "titleNView": [
            {
              "text": "返回",
              "type": "button",
              "float": "left"
            }
          ]
        }
      }
    }
  ]
}

然后，在你的页面脚本中处理按钮点击事件：

export default {
  onLoad() {
    // 监听导航栏按钮点击事件
    uni.$on('navigationBarButtonTap', (e) => {
      if (e.index === 0) { // 假设返回按钮是第一个按钮
        uni.navigateBack();
      }
    });
  },
  onUnload() {
    // 页面卸载时取消监听
    uni.$off('navigationBarButtonTap');
  }
}

2. 使用 currentWeb.getStyle().titleNView 设置按钮

currentWeb.getStyle().titleNView 通常用于获取当前页面的样式信息，而不是直接设置按钮。不过，你可以结合 plus.webview.currentWebview() 和 setStyle 方法来动态设置导航栏样式，包括按钮。

例如，动态添加或修改导航栏按钮：

const webview = plus.webview.currentWebview();

// 获取当前样式
webview.getStyle({
  titleNView: true,
}, (styles) => {
  // 修改或添加按钮
  let titleNView = styles.titleNView || [];
  titleNView.push({
    text: '新按钮',
    type: 'button',
    float: 'right',
    color: '#ffffff'
  });

  // 设置新样式
  webview.setStyle({
    titleNView: titleNView
  });
});

注意：直接在 currentWeb.getStyle().titleNView 上修改并不会生效，因为 getStyle 返回的是样式副本。你需要获取当前样式，修改后，再用 setStyle 方法应用新样式。

以上代码展示了如何在 uni-app 中处理导航栏按钮点击事件以及动态设置导航栏按钮。这些示例应当能帮助你更好地理解和实现相关功能。

回到顶部