用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框的方法

今天小編給大家分享的是用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框的方法，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

最近公司準(zhǔn)備做app，最終決定使用uni-app框架開發(fā)，但是當(dāng)把設(shè)計(jì)圖給我的時(shí)候我心里有點(diǎn)沒底，因?yàn)樗脑O(shè)計(jì)圖頂部長成這個(gè)樣子：

因?yàn)檫@個(gè)功能在小程序是根本無法實(shí)現(xiàn)的，可能受這個(gè)影響，我感覺好像實(shí)現(xiàn)不了，但是我還是回頭看了看文檔，才發(fā)現(xiàn)，這個(gè)功能是可以實(shí)現(xiàn)的，只需要在pages.json中做一些配置即可

這個(gè)在官方稱作app-plus,可以自定義導(dǎo)航區(qū)域，具體配置如下：

"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"
                            }
                    }
                }
            }
        }    ]

效果如下：

你可能會(huì)問，我的點(diǎn)擊事件和輸入框事件如何監(jiān)聽？

uni-app給出了相應(yīng)的api,onNavigationBarButtonTap和onNavigationBarSearchInputChanged，寫在響應(yīng)的頁面中即可：

export default {
        onNavigationBarButtonTap() {
            console.log("你點(diǎn)擊了按鈕")
        },
        onNavigationBarSearchInputChanged () {
            console.log("你輸入了信息")
        }
}

打印結(jié)果：

但是按鈕有兩個(gè)，只有一個(gè)按鈕事件怎么辦？還有輸入框的文字如何獲?。科鋵?shí)這兩個(gè)函數(shù)接收一個(gè)值，就是相對應(yīng)的信息：

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

打印結(jié)果：

按鈕事件根據(jù)對應(yīng)的text判斷即可，而輸入框監(jiān)聽的不是change事件，是input事件，即輸入后即可監(jiān)聽到而不是失焦

你以為這就完了？NoNoNo,眼尖的同學(xué)發(fā)現(xiàn)我做的和設(shè)計(jì)圖還是有區(qū)別的，右邊地圖有一個(gè)icon我沒有寫，如果按照上邊的方法是不能加的，但是我們可以去掉導(dǎo)航欄自定義

page.json里每個(gè)頁面的導(dǎo)航欄是默認(rèn)開啟的，有一個(gè)navigationStyle屬性，默認(rèn)值是default，我們把它改成custom就能把他去掉了：

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

但是移動(dòng)端導(dǎo)航依然在，這就需要我們使用titleNView這個(gè)屬性了，它是用來專門設(shè)置導(dǎo)航欄的，具體如下：

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

然后我們自己就可以寫一套導(dǎo)航了，最后效果如下：

這里有一個(gè)坑，除了要給這個(gè)導(dǎo)航設(shè)置固定定位外，實(shí)際上手機(jī)最上方的狀態(tài)欄，也就是這個(gè)位置是透明的，因?yàn)槲覀儼涯J(rèn)的導(dǎo)航去掉了：

所以我們在寫導(dǎo)航的時(shí)候上方的內(nèi)邊距是比下方的要大那么一點(diǎn)，這樣才能保證覆蓋狀態(tài)欄。

下面是我寫的源碼：

<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>

關(guān)于用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。