Die Eingabemethode ist unten in uniapp nicht enthalten

Mit der Popularität des mobilen Internets tauchen immer mehr Anwendungen auf. Eines der Probleme, die Entwickler lösen müssen, ist auch, wie Anwendungen benutzerfreundlicher und schneller gemacht werden können. In vielen Anwendungen ist die Navigationsleiste am unteren Rand ein wesentlicher Bestandteil, der Benutzern hilft, schnell zwischen Seiten zu wechseln. Wenn Sie jedoch die Eingabemethode auf einem mobilen Gerät verwenden, wird die Navigationsleiste mit zunehmender Eingabemethode verdeckt, was nicht nur zu einer unangenehmen Benutzererfahrung führt, sondern auch zu bestimmten Nutzungsproblemen führt.

Um dieses Problem zu lösen, verwenden viele Entwickler die Eingabemethodenkomponente, die nicht im unteren Teil des Uniapp-Frameworks enthalten ist. Die Funktion dieser Komponente besteht darin, zu ermöglichen, dass die Navigationsleiste am unteren Rand der Seite ganz unten auf der Seite fixiert wird und nicht blockiert wird, wenn die Eingabemethode steigt. In diesem Artikel erfahren Sie, wie Sie die untere Eingabemethodenkomponente in Uniapp verwenden.

1. Installieren Sie die uni-ui-Komponentenbibliothek

uni-ui ist eine Komponentenbibliothek, die auf dem Uniapp-Framework basiert. Sie enthält viele häufig verwendete Komponenten wie Eingabemethoden, Schaltflächen, Formulare, Navigation, Listen usw. Verwenden Sie uni-ui, um schnell eine hochwertige Uniapp-Anwendung zu erstellen. Zuerst müssen wir die Uni-UI-Komponentenbibliothek im Uniapp-Projekt installieren. Führen Sie im Stammverzeichnis des Uni-App-Projekts den folgenden Befehl aus:

npm install uni-ui -S

Dieser Befehl lädt die Uni-UI-Komponentenbibliothek automatisch herunter und installiert sie im Projektverzeichnis.

2. Verwenden Sie die untere Eingabemethodenkomponente.

Nach der Installation der Uni-UI-Komponentenbibliothek können wir die untere Eingabemethodenkomponente auf der Seite verwenden. Fügen Sie den folgenden Code zum Vorlagen-Tag der Seite hinzu:

<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>

Auf dieser Seite verwenden wir eine Uni-Tab-Bar-Komponente, um den Effekt zu erzielen, dass die Eingabemethode unten nicht befolgt wird. Die uni-tab-bar-Komponente enthält mehrere uni-tab-bar-item-Komponenten. Jede uni-tab-bar-item-Komponente stellt eine Schaltfläche in der unteren Navigationsleiste dar. Wenn wir die Uni-Tab-Bar-Komponente verwenden, müssen wir ihr die Attribute „Not-Safe-Area“ und „Fixed“ hinzufügen, um den Effekt zu erzielen, dass die Eingabemethode unten nicht befolgt wird.

In der Komponente „uni-tab-bar-item“ können wir die Attribute „Titel“, „Symbol“ und „URL“ festlegen, um den Text, das Symbol und den Sprunglink der Schaltfläche darzustellen. In diesem Beispiel richten wir drei Schaltflächen ein, um jeweils zur Startseite, zu Nachrichten und zu meinen Seiten zu springen.

3. Erzielen Sie den Effekt, dass die Eingabemethodenkomponente unten nicht befolgt wird Eingabemethodenkomponente unten. Fügen Sie den folgenden Code zum Style-Tag der Seite hinzu:

<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>

In diesem Stil fügen wir dem Inhaltsbereich der Seite das Attribut padding-bottom hinzu, um die Höhe der unteren Navigationsleiste beizubehalten. Gleichzeitig legen wir auch die Eigenschaften der Uni-Tab-Bar-Komponente fest, um sie am unteren Rand der Seite zu fixieren. Dadurch wird verhindert, dass die untere Navigationsleiste verdeckt wird und ihre Position am unteren Rand der Seite beibehalten wird.

4. Zusammenfassung

Bei der Verwendung des Uniapp-Frameworks zur Entwicklung von Anwendungen ist die untere Eingabemethodenkomponente eine sehr praktische Komponente. Dies kann uns helfen, das Problem zu lösen, dass die untere Navigationsleiste durch die Eingabemethode blockiert wird, und so die Benutzererfahrung komfortabler zu gestalten. In diesem Artikel stellen wir vor, wie Sie die untere Eingabemethodenkomponente in Uniapp verwenden und die Wirkung dieser Komponente erkennen. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonDie Eingabemethode ist unten in uniapp nicht enthalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!