uniapp 添加顶部搜索导航

最新推荐文章于 2025-06-28 01:24:31 发布

原创最新推荐文章于 2025-06-28 01:24:31 发布 · 3.4k 阅读

15 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在uni-app中配置搜索框，包括在pages.json中的布局设置，主页中监听搜索框点击事件实现页面跳转，以及搜索页的布局配置和监听事件。文章还提到了遇到的问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

（记得提前引入字体样式）

1.在 pages.json里面配置搜索界面（这里member为主页）：

{
            "path" : "pages/member/member",
            "style" : {
				"app-plus":{
					"scrollIndicator":"none",//隐藏滚动条
					"titleNView":{
						//搜索框配置
						"searchInput":{
							"align":"center" ,//居中
							"backgroundColor":"#f7f7f7",
							"borderRadius":"50rpx",
							"placeholder":"请搜索文字",
							"placeholderColor":"red",   //默认字体颜色
							"disabled":true    //不希望输入文本
						},
						//左右2个按钮
						"buttons":[
							//左边图标
							{
								"color":"#FF9619",
								"colorPressed":"#BBBBBB",
								"float":"left",
								"fontSize":"40px"   ,//文字大小
								"fontSrc":"/static/font/icon.ttf",
								"text":"\ue609"
							},
							//右边图标
							{
								"color":"#000000",
								"float":"right",
								"fontSrc":"/static/font/icon.ttf",
								"text":"\ue653"
							}
						]
					}
				}
			}
        },

2.在主页member.vue 加入监听搜索框点击事件，当点击搜索导航就会跳转到搜索页

		//监听搜索框点击事件
		onNavigationBarSearchInputClicked(){
			// console.log("打开搜索页")
			//跳转到搜索页
			uni.navigateTo({
				url:"../search/search"
			})
		},

遇到问题：如果没有加入参数"disabled":true 则不能跳转

3.搜索页布局配置(在 pages.json里面)

{
            "path" : "pages/search/search",
            "style" : {
				"app-plus":{
					"scrollIndicator":"none",//隐藏滚动条
					"titleNView":{
						"autoBackButton": false, //去掉返回按钮，未生效bug
						//搜索框配置
						"searchInput":{
							"align":"left" ,
							"backgroundColor":"#f7f7f7",
							"borderRadius":"50rpx",
							"placeholder":"请搜索文字",
							"placeholderColor":"red",   //默认字体颜色
							"disabled":false
						},
						
						"buttons":[	
							//取消按钮
							{
								"color":"#000000",
								"float":"right",
								"fontSize":"40rpx",
								"text":"取消"
							}
						]
					}
				}
			}
        }

4.点击取消按钮，返回到上一层（在search.vue中配置）

<script>
	export default{
		data(){
			return{
				
			};
		},
		//监听原生标题导航点击事件
		onNavigationBarButtonTap(e){
			if(e.index==0){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
	
</script>

5.2个监听事件接口 search.vue中修改（//监听搜索框文本变换，监听点击搜索按钮事件）

<script>
	export default{
		data(){
			return{
				
			};
		},
		//监听原生标题导航点击事件
		onNavigationBarButtonTap(e){
			if(e.index==0){
				uni.navigateBack({
					delta:1
				})
			}
		},
		
		//监听搜索框文本变换
		onNavigationBarSearchInputChanged(e) {
			console.log("监听文本搜索变化"+JSON.stringify(e.text))
		},
		//监听点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
			console.log("监听点击搜索事件"+JSON.stringify(e.text))
		}
	}
	
</script>