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

最近、会社でアプリを開発する準備をしており、最終的に開発には uni-app フレームワークを使用することになりました。しかし、設計図を渡されたとき、設計図の上部が次のようだったので少し不安を感じました。

この機能はアプレットでは利用できないため、実装できないと感じました。しかし、ドキュメントを見直してみると、この機能は実装可能であることがわかりました。pages.json でいくつかの設定を行う必要があります。

これは正式には app-plus と呼ばれ、ナビゲーション領域をカスタマイズできます。具体的な構成は次のとおりです。

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

効果は以下のとおりです。

クリックイベントと入力ボックスイベントをどのように監視すればよいのか疑問に思うかもしれません。

uni-app は、対応する API、onNavigationBarButtonTap および onNavigationBarSearchInputChanged を提供しており、これらは応答ページに記述できます。

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

結果を印刷:

しかし、ボタンは 2 つありますが、ボタンイベントは 1 つしかありません。どうすればよいでしょうか?入力ボックス内のテキストを取得するにはどうすればよいですか?実際、これら 2 つの関数は対応する情報である値を受け取ります。

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

結果を印刷:

ボタンイベントは対応するテキストに応じて判断することができ、入力ボックスは変更イベントではなく入力イベントをリッスンします。つまり、フォーカスを失うのではなく、入力後にリッスンすることができます。

それで終わりだと思いますか？いやいやいや、鋭い目を持つ学生は、私がやったことはデザインと違うことに気づきました。右側の地図に私が書いていないアイコンがあります。上記の方法に従うと、それを追加することはできませんが、ナビゲーションバーのカスタマイズを削除することはできます。

page.json 内の各ページのナビゲーションバーはデフォルトで有効になっています。デフォルト値が default の navigationStyle 属性があります。これを custom に変更することで削除できます。

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

ただし、モバイルナビゲーションはまだ存在するため、次のようにナビゲーションバーを具体的に設定するために使用される titleNView 属性を使用する必要があります。

{
            "パス" : "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;
    }
</スタイル>

上記は、uni-app を使用して上部ナビゲーションバーにボタンと検索ボックスを表示する方法の詳細です。uni-app を使用して上部ナビゲーションバーにボタンと検索ボックスを表示する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: