uniapp 配置app页面上方搜索栏，自定义按钮

最新推荐文章于 2024-09-29 11:01:33 发布

cv全粘工程师

最新推荐文章于 2024-09-29 11:01:33 发布

阅读量3.8k

点赞数 1

分类专栏： uniapp 文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/Ge_Daye/article/details/126757880

版权

uniapp 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本篇方法是在pages.json 中配置 app-plus的titleNView

注意：app-plus配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。
也就是说接下来的方法只适用于app或者H5，如果需要编译到小程序，建议自定义导航，或者用一些组件
上方导航栏需求

话不多说上代码，下面代码是在pages.json中配置的，在你想配置的页面配置

 {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "客户管理",
				"enablePullDownRefresh": true,
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"float": "right",
							"fontSize": "16px",
							"width": "60px",
							"color": "#3c434a",
							"text": "筛选"
						}],
						"searchInput": {
							"backgroundColor": "#eee",
							"borderRadius": "6px",
							"placeholder": "请输入客户姓名或电话"
						}
					}
				}
			}
		}

其中buttons是配置按钮，searchInput 就是搜索框了，其中有很多配置文档链接
链接: https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview

注：searchInput可以在titleNView的原生导航栏上放置搜索框。其宽度根据周围元素自适应

searchInput的事件可以在页面生命周期中监听到

1.点击输入框onNavigationBarSearchInputClicked
2.文本变化onNavigationBarSearchInputChanged
3.点击搜索按钮onNavigationBarSearchInputConfirmed等生命周期

这里我用的是第三个onNavigationBarSearchInputConfirmed

onNavigationBarSearchInputConfirmed(e) {
	//返回的参数如下
	// {
						// 	"text": "啦啦啦",
						// 	"target": {
						// 		省略...
						// 	},
						// 	"__callback_id__": "plus221662954603338",
						// 	"id": "4",
						// 	"loaded": true,
						// 	"__uniapp_route": "pages/customer/customerlist"
						// }

}

buttons的事件可以在页面生命周期中监听到

1.onNavigationBarButtonTap 监听原生标题栏按钮点击事件
返回参数：

{
	"float": "right",
	"fontSize": "16px",
	"width": "60px",
	"color": "#3c434a",
	"text": "筛选",
	"onclick": "function() { [native code] }",
	"__cb__": {
		"id": "plus231662954604439",
		"htmlId": "__uniapp__service"
	},
	"index": 0
}