uni-app を使用して上部のナビゲーション バーにボタンと検索ボックスを表示する方法

「ページ」: [
        {
            "パス": "ページ/インデックス/インデックス",
            「スタイル」: {
                "ナビゲーションバーの背景色": "#00c170",
                「アプリプラス」: {
                    "バウンス": "なし",
                    "タイトルNビュー": {
                        「ボタン」: [ 
                            {
                                "テキスト": "マップ", 
                                "フォントサイズ":"16",
                                "float": "右",
                                "色":"#fff"
                            },
                            {
                                "テキスト": "唐山", 
                                "フォントサイズ":"16",
                                "フロート": "左",
                                "色":"#fff"
                            }
                        ]、
                        "検索入力":{
                                "整列": "中央",
                                "placeholder": "物件を検索するための情報を入力してください",
                                "境界半径":"50upx",
                                "背景色": "#fff"
                            }
                    }
                }
            }
        } ]

エクスポートデフォルト{
        ナビゲーションバーボタンタップ() {
            console.log("ボタンをクリックしました")
        },
        ナビゲーションバーの検索入力が変更されました () {
            console.log("情報を入力しました")
        }
}

エクスポートデフォルト{
    onNavigationBarButtonTap(val) {
        コンソール.log(値)
    },
    onNavigationBarSearchInputChanged (val) {
        コンソール.log(値)
    }    
}

{
  "パス": "ページ/インデックス/インデックス",
  「スタイル」: {
     "ナビゲーションスタイル":"カスタム"
}

{
            "パス" : "pages/secondPage/secondPage",
            「スタイル」:{
                "ナビゲーションスタイル": "カスタム",
                「アプリプラス」: {  
                    "titleNView": 偽  
                }
            }
        }

<テンプレート>
    <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">
                    <入力タイプ="テキスト" 
                           placeholder="検索を入力してください"
                            v-model="値"
                           @change="入力変更"/>
                    <text class="iconfont iconfangdajing"></text>
                </ビュー>
                <view class="map-wrap"
                      v-if="rightWords||rightIcon"
                      @click="右クリック">
                    <text class="iconfont" :class="rightIcon"></text>
                    <text>{{rightWords}}</text>
                </ビュー>
            </ビュー>
        </ビュー>
        <view class="blank"></view>

    </ビュー>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        名前: "IndexHeader",
        小道具: [
            '左単語',
            '入力'、
            '右アイコン',
            '正しい言葉'
        ]、
        データ （） {
            戻る {
                価値： ''
            }
        },
        メソッド: {
            入力変更: 関数 () {
                this.$emit('change',this.value)
            },
            右クリック: 関数 () {
                this.$emit("右クリック")
            }
        }
    }
</スクリプト>

<スタイル lang="scss">
    $カラーベース: #00c16f; 
    $words-color-base: #333333;
    $words-color-light: #999999; 
    .ヘッダーラップ{
        幅: 100%;
        位置: 固定;
        上: 0;
        zインデックス: 999;
        
        .インデックスヘッダー{
            高さ: 88upx;
            行の高さ: 88upx;
            パディング: 0 30upx;
            パディングトップ: 40upx;
            背景色: $color-base;
            フォントサイズ: 28upx;
            色: #fff;
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの両端揃え: スペースの間;
            
            。住所 {
                フォントサイズ: 26upx;
            }
            
            .input-wrap {
                幅: 500upx;
                高さ: 70upx;
                パディング: 10upx 30upx 10upx 100upx;
                ボックスのサイズ: 境界線ボックス;
                背景色: #fff;
                境界線の半径: 50upx;
                色: $words-color-base;
                位置: 相対的;
                
                文章 {
                    位置: 絶対;
                    左: 40upx;
                    上: -8upx;
                    色: $words-color-light;
                    フォントサイズ: 30upx;
                }
            }
            
            .map-wrap {
                .アイコンフォント{
                    フォントサイズ: 32upx;
                    右マージン: 5upx;
                }
                文章 {
                    フォントサイズ: 26upx;
                }
            }    
        }
    }
    。空白 {
        高さ: 126upx;
    }
</スタイル>