uniapp petit programme barre de navigation personnalisée

1, si vous avez besoin d'utiliser une barre de navigation personnalisée lorsque la nécessité d'apporter les modifications suivantes dans le fichier page.json

"Pages": [ // entrée du tableau Pages indique une première page de lancement de l' application, Référence: HTTPS: //uniapp.dcloud.io/collocation/pages 
        {
             "path": "Pages / Liste / index" ,
             "style" : {
                 "navigationBarTitleText": "Liste" ,
                 "navigationStyle": " sur mesure" // Ajout de la configuration personnalisée 
            } 
        }, 
        {
             "path": "Pages / index / index" ,
             "style" : {
                 "navigationBarTitleText": "Home" 
            } 
        } 
    ],

2. Après la configuration, la navigation personnalisée a le libellé suivant

1) fixe la hauteur de la barre d'état, cette fois iphonex autre utilisation du téléphone mobile n'est pas recommandé

<Template> 
    <Voir> 
        <Voir class = "STATUS_BAR"> 
            <! - voici la barre d'état -> 
        </ Affichage> 
        <Affichage> État texte Bar </ Affichage> 
    </ Affichage> 
</ Modèle>     
< Style> 
    .status_bar { 
        hauteur: var (--status-bar- hauteur); 
        largeur: 100% ; 
        fond: Rouge; 
    }
 </ style>

2) personnalisés par écrit, ajuste lui-même aux modèles correspondants, tous les modèles peuvent être utilisés

<Template> 
    <Voir> 
        <- - Je dois prendre la barre d'état, ainsi que la distance à la partie de texte de 50px!> 
        <Voir class = "STATUS_BAR": style = "{height: hauteur 50 + + 'PX'}" > 
            <text> Liste </ text> 
        </ Affichage> 
        <Affichage> barre d'état texte </ Affichage> 
    </ Affichage> 
</ Template>   

<script> 
    Exporter par défaut { 
        données () { 
            retour { 
                hauteur: null , / / Obtenir le statut de hauteur de la barre 
            } 
        }, 
        le onLoad () { 
            var _this = la présente ;
            // obtenir l'état téléphone hauteur de la barre
 fonction             uni.getSystemInfo ({
                Succès: (données) {
                     // pour l' assigner à ce 
                    _this.height = data.statusBarHeight; 
                } 
            }) 
        }, 
    } </ script> 
<style> 
    .status_bar { 
        width: 100% ; 
        background: # 007AFF; 
        position: relative ; 
    } / * ajuster la position de la barre d'état du titre * / 
    texte { 
        position: absolute; 
        margin: auto; 
        fond: 10px; 
        gauche: 0 ; 
        droite: 0 ;


    
        texte - align: center; 
    }
 </ Style>