效果图如下:
在page.json中配置searchInput
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "订单信息",
"app-plus": {
"titleNView": {
"searchInput":{
"placeholder": "请输入订单关键字",
"borderRadius":"50rpx",
"backgroundColor": "#f1f1f1",
"align":"left" //对齐方式
}
}
}
}
},
navigationBarTitleText配置的标题会被输入框挡住,就没有标题了。
获取搜索框中输入的值,可以使用onNavigationBarSearchInputChanged方法,和methods同级。
onNavigationBarSearchInputChanged(val) {
console.log(val) //val为搜索框输入的值
},
如果需要清空搜索框的值,可以使用setTitleNViewSearchInputText方法赋值为空。
var currentWebview = this.$scope.$getAppWebview();
currentWebview.setTitleNViewSearchInputText(""); //将当前页面的搜索框的值赋为空
注:在安卓真机上,onLoad,onShow,onPullDownRefresh,或通过setTitleNViewSearchInputText方法赋值为空时,都会调用 onNavigationBarSearchInputChanged 这个方法,所以如果请求列表数据时,要注意,不然会重复请求列表数据。但在ios真机上,onLoad,onShow,onPullDownRefresh,或通过setTitleNViewSearchInputText方法赋值为空时都不会调用 onNavigationBarSearchInputChanged 这个方法。
如果需要在顶部导航栏同时显示搜索框和标题,可使用app-plus的buttons实现标题的显示。
如下图所示:
扫描二维码关注公众号,回复:
14816573 查看本文章
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "订单信息",
"app-plus": {
"titleNView": {
"searchInput":{ //搜索框
"placeholder": "请输入订单关键字",
"borderRadius":"50rpx",
"backgroundColor": "#f1f1f1",
"align":"left" //对齐方式
},
"buttons": [{
"text": "订单信息",
"float":"left", //控制标题显示的左右位置,"float":"left"就在搜索框右边了
"fontSize":"28rpx",
"fontWeight":"bold",
"width":"auto" //这个一定要加
}]
}
}
}
},
注:一定要加 "width":"auto" ,如果不加,在某些手机上,标题会显示不完整。
buttons中还可以显示图标
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "订单信息",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue000", //图标
"fontSrc": "/static/icon/iconfont.ttf",
"fontSize": "22px",
"color": "#55D88A"
}]
}
}
}
},