uniapp小さなプログラムのカスタムナビゲーションバー

1、あなたは必要がpage.jsonファイルで次の変更を行う際に、カスタムナビゲーションバーを使用する必要がある場合

「ページ」：[ // HTTPS：//uniapp.dcloud.io/collocation/pagesページ配列エントリは、最初のアプリケーション起動ページ、リファレンスを示し
        {
            「パス」：「ページ/一覧/インデックス」、
            「スタイル」： {
                 "navigationBarTitleText"： "一覧" 、
                 "navigationStyle"： "カスタム" // 追加のカスタム設定
            }
        }、
        {
            "パス"： "ページ/インデックス/インデックス" 、
             "スタイル" ：{
                 "navigationBarTitleText"： "ホーム"
            }
        }
    ]、

設定後、カスタムナビゲーションには、以下の文言があります2。

1）、ステータスバーの高さを固定し、他の携帯電話の使用iphonex今回はお勧めしません

<テンプレート>
    <表示>
        <ビュークラス= "STATUS_BAR">
            <！ - ここでは、ステータスバーです - >
        </ビュー>
        ステータスバーの<表示>テキスト</ビュー>
    </ビュー>
</テンプレート>    
<スタイル>
    。ステータスバー {
        高さ：VAR（--status-バー- 高さ）。
        幅： 100％;
        背景：赤;
    }
</スタイル>

2）書かれたカスタム、対応するモデルに自分自身を調整し、すべてのモデルを使用することができます

<テンプレート>
    <表示>
        <！ - レッツは、私はは50pxの距離のステータスバーのテキストの一部を行く必要が言います - >
        <ビュークラス= "STATUS_BAR" スタイル= "{高さ：高さ+ 50 + 'ピクセル'}">
            <テキスト>リスト</テキスト>
        </ビュー>
        ステータスバーの<表示>テキスト</ビュー>
    </ビュー>
</テンプレート>  

<スクリプト> 
    輸出デフォルト{
        データ（）{
            リターン{
                高さ：ヌル、// ステータスバーの高さを得ます
            }
        }、
        onLoad（）{
            するvar _this = この;
             // 電話のステータスバーの高さを取得
            uni.getSystemInfoを（{
                成功：関数（データ）{
                     // これに割り当てる 
                    _this.height = data.statusBarHeight。
                }
            }）
        }、
    }
</ SCRIPT>

<スタイル>
    。ステータスバー {
        幅： 100％;
        背景：＃007AFF。
        位置：相対;
    }
    / * ステータスバーのタイトルの位置を調整します* /
    テキスト{
        位置：絶対;
        マージン：自動;
        下：10pxの;
        左： 0 ;
        右： 0 ;
        テキスト - 整列：センター;
    }
</スタイル>