用uni-app实现顶部导航栏显示按钮和搜索框的方法

今天小编给大家分享的是用uni-app实现顶部导航栏显示按钮和搜索框的方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。

最近公司准备做app，最终决定使用uni-app框架开发，但是当把设计图给我的时候我心里有点没底，因为他的设计图顶部长成这个样子：

因为这个功能在小程序是根本无法实现的，可能受这个影响，我感觉好像实现不了，但是我还是回头看了看文档，才发现，这个功能是可以实现的，只需要在pages.json中做一些配置即可

这个在官方称作app-plus,可以自定义导航区域，具体配置如下：

"pages": [         {             "path": "pages/index/index",             "style": {                 "navigationBarBackgroundColor": "#00c170",                 "app-plus": {                     "bounce": "none",                     "titleNView": {                         "buttons": [                              {                                 "text": "地图",                                  "fontSize":"16",                                 "float": "right",                                 "color":"#fff"                             },                             {                                 "text": "唐山",                                  "fontSize":"16",                                 "float": "left",                                 "color":"#fff"                             }                         ],                         "searchInput":{                                 "align": "center",                                 "placeholder": "请输入查找房源信息",                                 "borderRadius":"50upx",                                 "backgroundColor": "#fff"                             }                     }                 }             }         }    ]

效果如下：

你可能会问，我的点击事件和输入框事件如何监听？

uni-app给出了相应的api,onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在响应的页面中即可：

export default {         onNavigationBarButtonTap() {             console.log("你点击了按钮")         },         onNavigationBarSearchInputChanged () {             console.log("你输入了信息")         } }

打印结果：

但是按钮有两个，只有一个按钮事件怎么办？还有输入框的文字如何获取？其实这两个函数接收一个值，就是相对应的信息：

export default {     onNavigationBarButtonTap(val) {         console.log(val)     },     onNavigationBarSearchInputChanged (val) {         console.log(val)     }     }

打印结果：

按钮事件根据对应的text判断即可，而输入框监听的不是change事件，是input事件，即输入后即可监听到而不是失焦

你以为这就完了？NoNoNo,眼尖的同学发现我做的和设计图还是有区别的，右边地图有一个icon我没有写，如果按照上边的方法是不能加的，但是我们可以去掉导航栏自定义

page.json里每个页面的导航栏是默认开启的，有一个navigationStyle属性，默认值是default，我们把它改成custom就能把他去掉了：

{   "path": "pages/index/index",   "style": {      "navigationStyle":"custom" }

但是移动端导航依然在，这就需要我们使用titleNView这个属性了，它是用来专门设置导航栏的，具体如下：

{             "path" : "pages/secondPage/secondPage",             "style" : {                 "navigationStyle": "custom",                 "app-plus": {                       "titleNView": false                   }             }         }

然后我们自己就可以写一套导航了，最后效果如下：

这里有一个坑，除了要给这个导航设置固定定位外，实际上手机最上方的状态栏，也就是这个位置是透明的，因为我们把默认的导航去掉了：

所以我们在写导航的时候上方的内边距是比下方的要大那么一点，这样才能保证覆盖状态栏。

下面是我写的源码：

<template>     <view class="head">         <view class="header-wrap">             <view class="index-header">                 <text class="address" v-if="leftWords">{{leftWords}}</text>                 <view class="input-wrap" v-if="input">                     <input type="text"                             placeholder="请输入搜索"                             v-model="value"                            @change="inputChange"/>                     <text class="iconfont iconfangdajing"></text>                 </view>                 <view class="map-wrap"                       v-if="rightWords||rightIcon"                       @click="rightClick">                     <text class="iconfont" :class="rightIcon"></text>                     <text>{{rightWords}}</text>                 </view>             </view>         </view>         <view class="blank"></view>     </view> </template> <script>     export default {         name: "IndexHeader",         props: [             'leftWords',             'input',             'rightIcon',             'rightWords'         ],         data () {             return {                 value: ''             }         },         methods: {             inputChange: function () {                 this.$emit('change',this.value)             },             rightClick: function () {                 this.$emit("rightClick")             }         }     } </script> <style lang="scss">     $color-base: #00c16f;      $words-color-base: #333333;     $words-color-light: #999999;      .header-wrap {         width: 100%;         position: fixed;         top: 0;         z-index: 999;                  .index-header {             height: 88upx;             line-height: 88upx;             padding: 0 30upx;             padding-top: 40upx;             background-color: $color-base;             font-size: 28upx;             color: #fff;             display: flex;             align-items: center;             justify-content: space-between;                          .address {                 font-size: 26upx;             }                          .input-wrap {                 width: 500upx;                 height: 70upx;                 padding: 10upx 30upx 10upx 100upx;                 box-sizing: border-box;                 background-color: #fff;                 border-radius: 50upx;                 color: $words-color-base;                 position: relative;                                  text {                     position: absolute;                     left: 40upx;                     top: -8upx;                     color: $words-color-light;                     font-size: 30upx;                 }             }                          .map-wrap {                 .iconfont {                     font-size: 32upx;                     margin-right: 5upx;                 }                 text {                     font-size: 26upx;                 }             }             }     }     .blank {         height: 126upx;     } </style>

关于用uni-app实现顶部导航栏显示按钮和搜索框的方法就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。