责任编辑设计图：
节录
特别注意：他们如是说呵呵此次合作开发采用的是uniapp，此次撷取文本的搜寻框为明令禁止输出搜寻框，点选重定向专用搜寻网页。
1、翻查官方网站实用性搜寻框pages实用性项
实用性镜像：uni-app官方网站 (dcloud.net.cn)
1.1 具体来说步入官方网站后找出如下表右图文本
1.2 如官方网站右图 style的表明如下表右图，看图操作方式
用作增设每一网页的输出框、导航条、副标题、询问处深蓝色等。
网页中实用性discuss全面覆盖 globalStyle 中完全相同的实用性项.
1.3 重定向指定的app-plus实用性项
他们需要实用性的是导航栏，所以选择titleNView 属性，根据自己的需求去选择即可。
1.4 导航栏实用性属性如下表右图，选择他们需要的即可
2、实用性APP端与H5端搜寻框（小流程端不兼容）
看了上面官方网站的截图，细心的小伙伴应该发现了，他们所选的app-plus是兼容H5的但是不兼容小流程端，所以他们需要自己手动编写小流程端的文本，详情看下文。
2.1 找出pages.json文件，实用性搜寻框
在pages实用性项中，找出他们需要实用性搜寻框的网页位置，添加style实用性项。示例代码如下表右图：
{ “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” // 按下状态按钮颜色 }] } } } }写完上面的代码他们可以看呵呵设计图：
搜寻框已经出现在他们主页的顶部，是他们所预期的效果。
2.2 监听搜寻框与按钮的点选事件
搜寻框点选事件与按钮点选事件
他们需要的就是上面两个方法 onNavigationBarSearchInputClicked与onNavigationBarButtonTap
示例代码如下表右图：
<script> export default {data() { return { } }, onLoad() { }, // 监听原生搜寻框的点选事件 onNavigationBarSearchInputClicked() {console.log(“在这里指定他们的重定向路径”) /* uni.navigateTo({ url: pages/search/search }); */ }, // 监听原生副标题栏按钮的点选事件 onNavigationBarButtonTap() {console.log(“监听到了原生副标题栏按钮的点选事件”); }, methods: { } }</script>特别注意：onNavigationBarSearchInputClicked 方法只有在pages.json 中的 searchInput 实用性 disabled 为 true 时才会触发
他们可以在对应的方法内编写相应的操作方式，例如点选搜寻框重定向指定的搜寻页。
2.3 拓展知识：监听多个按钮的点选事件
细心的小伙伴能发现，官方文档中的按钮点选事件按钮是一个数组而不是单个的
那么监听多个按钮的点选事件他们应该怎么去区分他们点选的是哪个按钮呢？
给大家演示呵呵：
pages.json文件文本实用性如下表右图：{“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” // 按下状态按钮颜色 }] } } } }index.vue文件监听事件如下表右图：// 监听原生副标题栏按钮的点选事件 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); }点选其中一个按钮e输出结果如下表右图，他们可以根据text属性和index属性去区分不同的按钮去完成相应的操作方式。{ “color”: “#959FA0”, “colorPressed”: “#333333”, “float”: “left”, “fontSize”: “14px”,“fontWeight”: “normal”, “index”: 1, “text”: “分类2”}APP 和 H5效果如下表右图：
3、实用性微信小流程搜寻框
上文写到的他们实用性的app-plus是不适配小流程端的，所以他们需要自己去手写一个搜寻导航栏。
示例代码中的class类中的类名样式是我已经在全局实用性好的，由于篇幅比较长，之后的小流程文章也会经常采用，我已经上传到了CSDN资源（免费），点选镜像重定向下载可查看相对应的样式。
free.css文件下载
示例代码如下表右图：<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>微信小流程端设计图如下表右图，自定义方法也是比较简单的：
到这里他们的搜寻导航栏实用性三端完毕啦，期待大家的交流指点
