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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Uniappは左右にスライドできるナビゲーションバーを実装しています
  • uni-app カスタムナビゲーションバーボタン | uniapp は WeChat トップナビゲーションバー機能を模倣します
  • Uniappはスライド可能なタブを実装
  • uniapp は日付を選択するための水平スクロールを実装します
  • uniapp、WeChat アプレットで MQTT を使用する際の問題
  • uniappとwebview間の相互値転送の実装
  • UniAppを使用してミニプログラムのWeChatログイン機能を実装する

<<:  Windows 10 1903 エラー 0xc0000135 の解決方法 [推奨]

>>:  データベースミドルウェアMyCatの紹介

推薦する

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

初心者向け入門講座⑧:記事サイトを簡単に作る

前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

HTML の順序なしリストタグと順序付きリストタグの使用例

1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...

HTMLのposition属性の使い方(4種類)の詳しい説明

位置の 4 つのプロパティ値は次のとおりです。 1.相対的な2.絶対3.修正4.静的これら 4 つの...

SQL で行の最大値または最小値を取得する方法

元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

HTML ページをズームアウトした後にスクロール バーを表示するためのサンプル コード

ここでは、HTML ページのサイズを縮小した後に下部にスクロール バーを表示し、スクロール バーをス...

React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明

目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...

1 つの記事で Nginx の現在の制限を理解する (簡単な実装)

Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...

Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

JavaScriptオフセットは、ウィンドウ内でのマウス座標の取得とモジュールのドラッグを実装します。

オフセットOffset はオフセットです。関連プロパティの offset シリーズを使用すると、次の...