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で書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...

一般的な HTTP ステータス コード 10 個の詳細な説明

HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...

jQueryはショッピングカートの完全な機能を実現します

この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...

Mysqlのマージ結果と水平スプライシングフィールドの実装手順

序文最近、レポート機能に取り組んでいたのですが、ある月に各部署に入社した人と退職した人の数をカウント...

MySQL の起動オプションとシステム変数の例の詳細な説明

目次ブートオプションコマンドラインパラメータの長い形式と短い形式設定ファイル構成グループシステム変数...

docker で zabbix_agent をデプロイする方法

zabbix_agent のデプロイメント:推奨事項: zabbix_agent は docker-...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

Vueは虫眼鏡付きの検索ボックスを実装します

この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

Vueバインディングクラスとバインディングインラインスタイルの実装方法

目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

SQL実装 LeetCode (176. 2番目に高い給与)

[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...