L'exemple montre comment Uniapp implémente une barre de navigation personnalisée

Avec le développement des applications mobiles, la barre de navigation est devenue l'une des fonctions nécessaires à de nombreuses applications. Uni-app est un framework full-stack qui peut développer plusieurs applications mobiles (y compris iOS, Android, etc.) en même temps. Il fournit une multitude de composants et d'API pour permettre aux développeurs de réutiliser et de personnaliser rapidement les fonctions des applications.

Dans Uni-app, pour implémenter la barre de navigation, vous pouvez utiliser le composant de barre de navigation dans la bibliothèque de composants uni-ui, ou vous pouvez utiliser un composant personnalisé pour l'implémenter. Ci-dessous, nous utiliserons un exemple pour montrer comment implémenter une barre de navigation personnalisée.

1. Créer une page

Tout d'abord, nous devons créer une nouvelle page sous le dossier pages, qui peut être créée via le raccourci fourni par Uni-app. Dans cette page, nous devons définir la couleur d'arrière-plan et le titre de l'en-tête de la page, et introduire le composant de barre de navigation dans la page.

Ajoutez le bloc de code suivant en tête de page :

<template>
  <div class="container">
    <view class="navbar" style="background-color: #007aff">
      <status-bar></status-bar>
      <view class="navbar-title">
        <text class="title-text">Uni-app导航栏示例</text>
      </view>
    </view>
    // 页面内容部分
  </div>
</template>

Dans le code ci-dessus, navbar est le conteneur de style de la barre de navigation, navbar-title est le conteneur de la partie titre et title-text est le texte du titre.

2. Définir la barre de navigation et la barre d'état

Ensuite, nous définirons les styles de la barre de navigation et de la barre d'état dans la feuille de style (style) de la page actuelle. Dans les applications pratiques, le style peut être ajusté selon les besoins. Voici un exemple simple de feuille de style :

.container {
  height: 100%;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
}
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -44px;
}
.title-text {
  color: #fff;
  font-size: 18px;
}

Dans la feuille de style, nous ajustons principalement la hauteur, la couleur d'arrière-plan, la taille de la police, etc. de la barre de navigation et de la barre d'état. Il convient de noter que la barre d'état est une zone spéciale dans iOS et doit être gérée séparément.

3. Comment gérer la barre d'état

Le traitement de la barre d'état doit être géré en fonction des différents systèmes du téléphone mobile. Ce qui suit est un exemple de code simple qui permet de définir la couleur du texte de la barre d'état sur blanc et, sur le système iOS, de conserver la couleur d'arrière-plan de la barre d'état cohérente avec celle de la barre de navigation.

<template>
  <div class="container">
    <view class="navbar" style="background-color: #007aff">
      <status-bar style="background-color: #007aff" border-style="white"></status-bar>
      <view class="navbar-title">
        <text class="title-text">Uni-app导航栏示例</text>
      </view>
    </view>
    // 页面内容部分
  </div>
</template>

<style>
.container {
  height: 100%;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
}
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -44px;
}
.title-text {
  color: #fff;
  font-size: 18px;
}
</style>

<script>
  export default {
    onNavigationBarButtonTap() {
      console.log('导航栏按钮被点击了');
    },
  };
  uni.getSystemInfo({
    success: res => {
      if (/iphone/i.test(res.model)) {
        // 如果是IOS系统
        uni.setNavigationBarColor({
          frontColor: '#ffffff', // 文字颜色
          backgroundColor: '#007aff', // 背景颜色
          animation: {
            duration: 400,
            timingFunc: 'easeIn',
          },
        });
      } else if (/android/i.test(res.model)) {
        // 如果是Android系统
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#007aff',
          animation: {
            duration: 400,
            timingFunc: 'easeIn',
          },
        });
      }
    },
  })
</script>

Dans le code ci-dessus, nous utilisons la méthode uni.setNavigationBarColor() pour définir le style de la barre d'état. Selon le système, nous pouvons définir différentes couleurs. Parmi eux, frontColor représente la couleur du texte de la barre d'état et backgroundColor représente la couleur d'arrière-plan de la barre d'état.

4. Implémenter le bouton retour et le bouton droit de la barre de navigation

Dans les applications pratiques, il est généralement nécessaire d'ajouter le bouton retour et le bouton droit de la barre de navigation. Dans Uni-app, nous pouvons utiliser le composant nav-bar dans la bibliothèque de composants uni-ui pour implémenter cette fonction, ou nous pouvons utiliser un composant personnalisé.

Ci-dessous, nous montrerons comment implémenter le bouton de retour et le bouton droit de la barre de navigation personnalisée.

<template>
  <div class="container">
    <view class="navbar" style="background-color: #007aff">
      <nav-bar bg-color="#007aff" title="导航栏示例" @click-left="back" @click-right="onFinish"></nav-bar>
      <view class="navbar-title">
        <text class="title-text">Uni-app导航栏示例</text>
      </view>
    </view>
    // 页面内容部分
  </div>
</template>

Dans le code ci-dessus, nous avons utilisé le bouton retour personnalisé et le bouton droit. Parmi elles, la fonction back est la fonction de traitement des événements de clic du bouton retour, et la fonction onFinish est la fonction de traitement des événements de clic du bouton droit.

/* 样式表 */
.container {
  height: 100%;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
}
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -44px;
}
.title-text {
  color: #fff;
  font-size: 18px;
}

Dans la feuille de style, nous avons principalement ajusté la hauteur, la couleur d'arrière-plan, la taille de la police, etc. de la barre de navigation et de la barre d'état. En pratique, le style peut également être ajusté selon les besoins.

5. Résumé

Grâce à la démonstration ci-dessus, nous pouvons voir qu'Uni-app fournit des composants riches et un support API pour la mise en œuvre de la barre de navigation. En personnalisant les composants, nous pouvons facilement implémenter des barres de navigation personnalisées. Dans le même temps, grâce au traitement de la barre d'état, nous pouvons également fournir des effets visuels cohérents sur les systèmes IOS et Android.

Afin d'améliorer l'expérience interactive de l'utilisateur, la conception et la mise en œuvre de la barre de navigation sont un maillon très critique. Lorsque vous utilisez Uni-app, veuillez prêter attention à la collaboration entre la conception et le développement de l'interface utilisateur afin de fournir aux utilisateurs une expérience de service de première classe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!