どのようにuni-apでトップナビゲーションバーの表示ボタンと検索ボックスを実現しますか？

最近会社はappを作るつもりです。最終的にuni-appフレームを使って開発することにしました。でも、設計図をくれた時、心がちょっと底がないです。彼の設計図のトップがこのように成長しているからです。

この機能は小さいプログラムではまったく実現できないので、この影響を受けて実現できないような気がしますが、文書を見て振り返ってみました。この機能は実現できます。パges.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は対応するappを提供して、onNavigationBarButotonTapとonNavigationBarSearch Input Chend、応答のページに書けばいいです。

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-apで実現しますか？他の関連記事に注目してください。