第一步在pages.json 内部定义 原生导航栏搜索框和按钮
{"path": "pages/tabbar/dingdan/dingdan","style": {// App平台的特定样式"app-plus": {"bounce": "none", //取消回弹效果 // 是否显示滚动条 不"scrollIndicator": "none",// 导航栏设置"titleNView": {// 原生导航栏搜索框设置 "searchInput": {// 输入框非输入状态下文本对齐方式"align": "left",// 输入框是否自动获取焦点 不"autoFocus": false,// 输入框背景颜色"backgroundColor": "#F2F2F2",// 输入框的圆角半径"borderRadius": "6px",// 输入框是否可输入 true等于不可输入 "disabled": true,// 输入框提示文本"placeholder": "输入姓名搜索订单",// 提示文本颜色"placeholderColor": "#9C9C9C"},// 导航栏上自定义按钮"buttons": [{// 右侧按钮1// 按钮上文字颜色"color": "#F2F2F2",// 按下状态 按钮文字颜色"colorPressed": "#989898", // 按钮在标题栏上的显示位置"float": "right",// 按钮上文字大小"fontSize": "35rpx",// 按钮上文字使用的字体文件路径"fontSrc": "/static/font/iconfont.ttf",// 按钮上显示的文字 外部引入的// "text": "\ue67a""text": "今天/10/05", // 导航栏右侧按钮所占的宽度 "width":"170px" } // // 右侧按钮2// {// "color": "#989898",// "colorPressed": "#FD6801",// "float": "right",// "fontSize": "50rpx",// "fontSrc": "/static/font/iconfont.ttf",// "text": "\ue630"// }]}}}
第二步在页面中 可以 动态修改以下内容
onLoad() {// 调用初始化数据方法this.setNewsitems()this.xiugai()},methods: {// 修改自定义导航栏按钮文字内容xiugai() {// 定义 webViewvar webView = this.$scope.$getAppWebview()// 修改角标webView.setTitleNViewButtonBadge({index: 0,text: 12,});// 搜索框聚焦webView.setTitleNViewSearchInputFocus(true)// 搜索框失去焦点webView.setTitleNViewSearchInputFocus(false)// 修改按钮文字内容webView.setTitleNViewButtonStyle(0, {width: 'auto', //宽度自动 text: "今天19月15日", //修改后的按钮内容fontSize: '15px'});}}
附加方法
// 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
});
}
}
})
}
