Mikel
来源： uniapp 添加顶部搜索导航_typeerror: uni.onnavigationbarsearchinputclicked i-CSDN博客
（记得提前引入字体样式）
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>
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45200726/article/details/108616708
