1.修改导航栏buttons
如图动态修改角标
<template> <view> </view> </template> <script> export default { data(){ return{ } }, //监听头部导航红点事件 onNavigationBarButtonTap(e) { if(e.index==0){//系统消息 uni.navigateTo({ url:"../news/news" }) } }, mounted(){ //动态设置导航栏角标,0为从右往左数第一个,true显示还是隐藏角标或者红点,最后一个显示角标为多少 this.setStyle(0,false,''); }, methods:{ /** * 修改导航栏buttons * index[number] 修改的buttons 下标索引,最右边索引为0 * show[boolean] 显示还是隐藏角标或者红点 * text[string] 需要修改的角标的text 内容 ,如果定义redDot 此参数无效 ,如果定义badgeText请设置具体,如果不用输入 */ setStyle(index, show,text) { let pages = getCurrentPages(); let page = pages[pages.length - 1]; // #ifdef APP-PLUS let currentWebview = page.$getAppWebview(); if(show){ if(index === 0){ currentWebview.setTitleNViewButtonBadge({index:index,text:text}) }else{ currentWebview.showTitleNViewButtonRedDot({index:index,text:text}) } }else{ if(index === 0){ currentWebview.removeTitleNViewButtonBadge({index:index}) }else{ currentWebview.hideTitleNViewButtonRedDot({index:index}) } } // #endif }, } } </script> <style scoped="scoped" lang="scss"></style>
下面是官方demo实例方法
// #ifdef APP-PLUS var webView = this.$mp.page.$getAppWebview(); // 修改buttons // index: 按钮索引, style {WebviewTitleNViewButtonStyles } webView.setTitleNViewButtonStyle(0, { text: 'hello', }); // 修改按钮上的角标 // index: 按钮索引, text: 角标文本内容 webView.setTitleNViewButtonBadge({ index: 0, text: 10, }); // 设置 searchInput的 focus // focus: true | false webView.setTitleNViewSearchInputFocus(true) // 设置 searchInput的 text webView.setTitleNViewSearchInputText(text) // searchInput 通过 webview 的 setStyle 方法进行更新 var tn = currentWebview.getStyle().titleNView; if (tn.buttons) { uni.getSystemInfo({ success:function(res){ if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug,searchInput的I变小写了 ,临时绕过下。更高版本会修复此bug tn.searchinput.placeholder = 'test'; currentWebview.setStyle({ titleNView: tn }); } else{ tn.searchInput.placeholder = 'test'; //这里有个已知bug,HBuilderX 1.9.9上,当searchInput位于首页时,动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug currentWebview.setStyle({ titleNView: tn }); } } }) } // #endif