Comment annuler la navigation supérieure dans Uniapp

Dans les applications mobiles, les barres de navigation sont généralement utilisées pour aider les utilisateurs à comprendre leur emplacement actuel et les options de navigation disponibles. Cependant, dans certains cas, la suppression de la navigation supérieure peut mieux répondre aux besoins de l'application. Dans UNIAPP, annuler la navigation supérieure est très simple. Nous présenterons ensuite en détail comment y parvenir.

Pourquoi annuler la navigation supérieure ?

Parfois, les pages d'une application ne nécessitent pas de barre de navigation supérieure, en particulier compte tenu des différents scénarios d'application et comportements des utilisateurs. Il peut être plus conforme à l'expérience utilisateur d'annuler la barre de navigation supérieure. Par exemple, lorsque nous souhaitons créer un simple diaporama plein écran, nous n’avons pas besoin d’une barre de navigation supérieure pour distraire l’utilisateur, mais nous devons plutôt nous concentrer davantage sur le contenu de la diapositive elle-même.

Annuler l'implémentation de la navigation supérieure dans UNIAPP

1. Définir "navigationStyle": "custom" dans manifest.json

# 🎜 🎜#Ouvrez le fichier manifest.json dans le projet UNIAPP et recherchez l'attribut "navigationStyle" sous l'option "globalStyle". Remplacez-le par "personnalisé" comme indiqué ci-dessous :

"globalStyle": {
  "navigationStyle": "custom"
},

Après avoir défini "personnalisé", la page n'affichera plus la barre de navigation par défaut.

Définir padding-top dans le style de la page

La barre de navigation par défaut ayant été annulée, nous devons ajouter padding-top au page pour empêcher le blocage du contenu. Vous pouvez ajouter le code suivant au style de la page :

page {
  padding-top: env(safe-area-inset-top);
}

En utilisant cette technique, nous pouvons éviter que des éléments de la page ne soient couverts, et également garantir que les informations clés de notre application peuvent être spectacle mieux mis en valeur.

Saut d'événement de bouton

Après avoir annulé la barre de navigation, nous devons implémenter une fonction de saut dans la page afin que les utilisateurs puissent parcourir l'intégralité programme de candidature. Mais ce à quoi nous devons penser à ce stade, c'est que l'annulation de la barre de navigation ne signifie pas que nous devons abandonner complètement la fonction de navigation. Par conséquent, redéfinissez un bouton et ajoutez des écouteurs d'événements dans le code JS pour implémenter le saut.

Dans UNIAPP, le bouton peut être remplacé par l'icône fournie par la bibliothèque d'icônes uni-icons Le code est le suivant :

<template>
  <view>
    <button @tap="redirectToIndex" class="icon-btn">
      <uni-icons type="home" size="30"></uni-icons>
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToIndex() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.icon-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Le code ci-dessus définit une "icône". -btn". Et défini le positionnement fixe flottant, le coin inférieur droit est la position de fonctionnement et le reste des styles est personnalisé. Lors de l'utilisation de ce bouton, le saut de page est principalement réalisé via la fonction uni.redirectTo() dans l'événement JS. Cette fonction ferme la page en cours et redirige l'utilisateur vers la page d'accueil de l'application.

Summary

Il est très simple d'annuler la navigation supérieure d'UNIAPP. Il suffit de définir l'attribut navigationStyle dans le fichier manifest.json du projet, puis de le définir. l'attribut padding-top dans la page Can. De plus, afin d'implémenter la fonction de saut, nous pouvons ajouter un bouton et y ajouter un événement JS pour effectuer des opérations de page dans l'application. Avec cette approche, nous pouvons offrir plus de liberté et d’opportunités pour offrir une meilleure expérience utilisateur aux utilisateurs de l’application.

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!