第一步在 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": "今天2022/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() {
// 定义 webView
var webView = this.$scope.$getAppWebview()
// 修改角标
webView.setTitleNViewButtonBadge({
index: 0,
text: 12,
});
// 搜索框聚焦
webView.setTitleNViewSearchInputFocus(true)
// 搜索框失去焦点
webView.setTitleNViewSearchInputFocus(false)
// 修改按钮文字内容
webView.setTitleNViewButtonStyle(0, {
width: 'auto', //宽度自动
text: "今天2022年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
});
}
}
})
}