5
如何在uniapp中修改原生导航栏?

第一步,先获取当前页面的webview:

var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();

第二步,获取当前webview的titleNview

var tn = currentWebview.getStyle().titleNView;

打印tn 得到如下效果:

{
    "autoBackButton": true,
    "backgroundColor": "#F8F8F8",
    "buttons": [{
        "text": "不使用",
        "type": "none",
        "color": "#333",
        "background": "#fff",
        "fontSize": "16px",
        "fontWeight": "bold",
        "width": "80px"
    }],
    "dock": "top",
    "height": 44,
    "position": "dock",
    "statusbar": {},
    "tags": [],
    "titleColor": "#000000",
    "titleText": "优惠券",
    "type": "default"
}

第三步,动态设置其中参数:

tn.buttons[0].text = '动态按钮名字';

第四步,更新webview的原生导航栏:

currentWebview.setStyle({
    titleNView: tn
});

杭州蘇小小
178 声望12 粉丝

我是一名 WEB前端 开发者不断在前端这条路上努力拼搏着。我喜欢代码的逻辑有序性,每一行代码都有其不同的作用,所有的代码加起来就可以让用户能愉快的体验我的产品。我喜欢研究,遇到难题我不退缩,我相信我可以...