uniapp小程序之配置首页搜索框功能的实现

{
			"path": "pages/index/index",
			"style": {
				"app-plus": {
					"titleNView": {
						"searchInput": {
							"align": "left",
							"backgroundColor": "#F6F7F8",
							"borderRadius": "40px",
							"disabled": true,
							"placeholder": "默认提示文本",
							"placeholderColor": "#959FA0"
						},
						"buttons": [{
							"float": "right",
							"text": "分类",
							"fontSize": "14px",
							"color": "#959FA0",
							"colorPressed": "#333333" // 按下状态按钮颜色
						}]
					}
				}
			}
		}

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		// 监听原生搜索框的点击事件
		onNavigationBarSearchInputClicked() {
			console.log("在这里指定我们的跳转路径")
			/* uni.navigateTo({
				url: 'pages/search/search'
			}); */
		},
		// 监听原生标题栏按钮的点击事件
		onNavigationBarButtonTap() {
			console.log("监听到了原生标题栏按钮的点击事件");
		},
		methods: {
		}
	}
</script>

{
			"path": "pages/index/index",
			"style": {
				"app-plus": {
					"titleNView": {
						"searchInput": {
							"align": "left",
							"backgroundColor": "#F6F7F8",
							"borderRadius": "40px",
							"disabled": true,
							"placeholder": "默认提示文本",
							"placeholderColor": "#959FA0"
						},
                       // 左右两边各有一个按钮
						"buttons": [{
							"float": "right",
							"text": "分类1",
							"fontSize": "14px",
							"color": "#959FA0",
							"colorPressed": "#333333" // 按下状态按钮颜色
						},
                        {
							"float": "left",
							"text": "分类2",
							"fontSize": "14px",
							"color": "#959FA0",
							"colorPressed": "#333333" // 按下状态按钮颜色
						}]
					}
				}
			}
		}

// 监听原生标题栏按钮的点击事件
		onNavigationBarButtonTap(e) {
			if(e.text=='分类1'){
				console.log('当前点击的按钮为分类1按钮，可做相应操作')
			}
            if(e.text=='分类2'){
				console.log('当前点击的按钮为分类2按钮，可做相应操作')
			}
          // e 代表的是所点击的按钮之一，如果需要操作指定按钮可以根据按钮的index值或者text值去区分做出不同的响应操作
			console.log(e);
			console.log("监听到了原生标题栏按钮的点击事件" + e.text);
		}

{
     "color": "#959FA0",
     "colorPressed": "#333333",
     "float": "left",
     "fontSize": "14px",
     "fontWeight": "normal",
     "index": 1,
     "text": "分类2"
} 

<template>
	<view>
		<!-- #ifdef MP -->
		<!-- 只编译到微信小程序端 -->
		<view class="flex align-center fixed-top" style="height: 44px;">
			<!-- 搜索框 -->
			<view class="ml-2 flex align-center flex-1 rounded-circle px-1"
				style="background-color: #F6F7F8;color: #959FA0;" @click="GoSearch()">
				<text class="iconfont iconsousuokuang" 
                      style="margin-right: 8px;font-size: 20px;"></text>
				<text>点击搜索框跳转专属搜索页面</text>
			</view>
			<view class="flex align-center px-2" style="color:#959FA0;" @click="classify()">分类</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		// 监听原生搜索框的点击事件
		onNavigationBarSearchInputClicked() {
			console.log("在这里指定我们的跳转路径")
			/* uni.navigateTo({
				url: 'pages/search/search'
			}); */
		},
		// 监听原生标题栏按钮的点击事件
		onNavigationBarButtonTap() {
			console.log("监听到了原生标题栏按钮的点击事件" + e.text);
		},
		methods: {
			GoSearch() {
				console.log("跳转到搜索页");
			},
			classify() {
				console.log('点击了分类按钮');
			}
		}
	}
</script>