uniapp はナビゲーションバー上部の検索機能を実現する APP を開発しています。

レンダリングは次のとおりです。

page.json で searchInput を構成する

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"searchInput":{
					"placeholder": "请输入订单关键字",
					"borderRadius":"50rpx",
					"backgroundColor": "#f1f1f1",
					"align":"left"  //对齐方式
				}
			}
		}
	}
},

navigationBarTitleText によって構成されたタイトルは、入力ボックスによってブロックされるため、タイトルはありません。

検索ボックスに入力された値を取得するには、メソッドと同じレベルの onNavigationBarSearchInputChanged メソッドを使用できます。

onNavigationBarSearchInputChanged(val) {
	console.log(val)  //val为搜索框输入的值
},

検索ボックスの値をクリアする必要がある場合は、setTitleNViewSearchInputText メソッドを使用して空の値を割り当てることができます。

var currentWebview = this.$scope.$getAppWebview();
currentWebview.setTitleNViewSearchInputText("");  //将当前页面的搜索框的值赋为空

注:実際の Android デバイスでは、onNavigationBarSearchInputChanged メソッドは、onLoad、onShow、onPullDownRefresh、または setTitleNViewSearchInputText メソッドが空のときに呼び出されるため、リストデータを要求する場合は注意が必要です。そうしないと、リストデータが繰り返し要求されます。 . しかし、iOS の実機では、onLoad、onShow、onPullDownRefresh の場合、または setTitleNViewSearchInputText メソッドによって値が空に割り当てられた場合、onNavigationBarSearchInputChanged メソッドは呼び出されません。

トップナビゲーションバーに検索ボックスとタイトルを同時に表示する必要がある場合は、app-plus のボタンを使用してタイトルを表示できます。

以下に示すように：

{
	"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" を追加する必要があります。追加しないと、一部の携帯電話でタイトルが不完全に表示されます。

ボタンにアイコンを表示することもできます

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"buttons": [{
					"text": "\ue000",   //图标
					"fontSrc": "/static/icon/iconfont.ttf",
					"fontSize": "22px",
					"color": "#55D88A"
				}]
			}
		}
	}
},

uniapp はナビゲーションバー上部の検索機能を実現する APP を開発しています。

おすすめ