La méthode de saisie n'est pas incluse au bas d'uniapp

Avec la popularité de l'Internet mobile, de plus en plus d'applications commencent à apparaître. Comment rendre les applications plus faciles à utiliser et plus rapides est également l'un des problèmes que les développeurs doivent résoudre. Dans de nombreuses applications, la barre de navigation en bas est un composant essentiel qui aide les utilisateurs à basculer rapidement entre les pages. Cependant, lors de l'utilisation de la méthode de saisie sur un appareil mobile, la barre de navigation sera masquée à mesure que la méthode de saisie augmente, ce qui non seulement rend l'expérience utilisateur inconfortable, mais provoque également certains problèmes d'utilisation.

Afin de résoudre ce problème, de nombreux développeurs utilisent le composant de méthode de saisie qui n'est pas fourni avec le bas du framework uniapp. La fonction de ce composant est de permettre à la barre de navigation en bas de page d'être fixée en bas de page et de ne pas être bloquée au fur et à mesure que le mode de saisie monte. Dans cet article, nous explorerons comment utiliser le composant de méthode de saisie inférieure dans uniapp.

1. Installez la bibliothèque de composants uni-ui

uni-ui est une bibliothèque de composants basée sur le framework uniapp. Elle comprend de nombreux composants couramment utilisés, tels que les méthodes de saisie, les boutons, les formulaires, la navigation, les listes, etc. Utilisez uni-ui pour créer rapidement une application uniapp de haute qualité. Tout d’abord, nous devons installer la bibliothèque de composants uni-ui dans le projet uniapp. Dans le répertoire racine du projet uni-app, exécutez la commande suivante :

npm install uni-ui -S

Cette commande téléchargera et installera automatiquement la bibliothèque de composants uni-ui dans le répertoire du projet.

2. Utilisez le composant de méthode de saisie inférieur

Après avoir installé la bibliothèque de composants uni-ui, nous pouvons utiliser le composant de méthode de saisie inférieur sur la page. Ajoutez le code suivant à la balise modèle de la page :

<template>
  <view>
    <!-- 页面内容区域 -->
  </view>
  <uni-tab-bar not-safe-area fixed>
    <uni-tab-bar-item
      title="首页"
      icon="uni-icons-home"
      url="/pages/home/home"
    ></uni-tab-bar-item>
    <uni-tab-bar-item
      title="消息"
      icon="uni-icons-comment"
      url="/pages/message/message"
    ></uni-tab-bar-item>
    <uni-tab-bar-item
      title="我的"
      icon="uni-icons-person"
      url="/pages/user/user"
    ></uni-tab-bar-item>
  </uni-tab-bar>
</template>

Dans cette page, nous utilisons un composant uni-tab-bar pour obtenir l'effet de ne pas suivre la méthode de saisie en bas. Le composant uni-tab-bar-item contient plusieurs composants uni-tab-bar-item, chaque composant uni-tab-bar-item représente un bouton de barre de navigation inférieure. Lors de l'utilisation du composant uni-tab-bar, nous devons y ajouter la zone non sécurisée et les attributs fixes pour obtenir l'effet de ne pas suivre la méthode de saisie en bas.

Dans le composant uni-tab-bar-item, nous pouvons définir les attributs title, icon et url pour représenter le texte, l'icône et le lien de saut du bouton. Dans cet exemple, nous avons configuré trois boutons pour accéder respectivement à la page d'accueil, aux messages et à mes pages.

3. Obtenir l'effet de ne pas suivre le composant de méthode de saisie en bas

Après avoir ajouté le composant uni-tab-bar à la page, nous devons également définir certains attributs dans le style pour obtenir l'effet de ne pas suivre le composant de méthode de saisie en bas. Ajoutez le code suivant à la balise de style de la page :

<style>
  /* 页面内容区域 */
  view {
    height: 100%;
    padding-bottom: 144rpx; /* 底部导航栏高度 */
    box-sizing: border-box;
  }
  /* 底部导航栏 */
  uni-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ebedf0;
  }
</style>

Dans ce style, on ajoute l'attribut padding-bottom à la zone de contenu de la page pour laisser la hauteur de la barre de navigation inférieure. Dans le même temps, nous définissons également les propriétés du composant uni-tab-bar pour le fixer en bas de page. Cela évite que la barre de navigation inférieure ne soit masquée et conserve sa position au bas de la page.

4. Résumé

Lors de l'utilisation du framework uniapp pour développer des applications, le composant de méthode de saisie inférieur est un composant très pratique. Cela peut nous aider à résoudre le problème du blocage de la barre de navigation inférieure par la méthode de saisie, rendant ainsi l'expérience utilisateur plus confortable. Dans cet article, nous expliquons comment utiliser le composant de méthode de saisie inférieure dans uniapp et réaliser l'effet de ce composant. J'espère que cet article vous sera utile.

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!