So steuern Sie das Anzeigen und Ausblenden der Tableiste in Uniapp

Mit der weit verbreiteten Nutzung mobiler Anwendungen wird TabBar als gängiges Design der unteren Navigationsleiste von immer mehr Anwendungen übernommen. In der UniApp-Entwicklung des Vue-Frameworks unterscheidet sich auch die Art und Weise, die Anzeige und das Ausblenden der TabBar zu steuern, von der bei herkömmlichen nativen Anwendungen. In diesem Artikel wird erläutert, wie Sie mit UniApp die Anzeige und das Ausblenden der TabBar steuern.

1. Vorkenntnisse

Bevor Sie die in diesem Artikel beschriebenen Vorgänge zum Steuern der Anzeige und Ausblendung von TabBar ausführen, müssen Sie die folgenden Vorkenntnisse beherrschen:

• Vue 2 (wenn Sie Vue 3 bereits beherrschen, ist es erforderlich ist besser)
• UniApp-Grundkenntnisse (einschließlich grundlegender Konzepte wie Projektvorlagen, Seiten, Komponenten usw.)
• UniApp-Layoutmethoden (Flex, Raster, Position usw.)
• npm-Abhängigkeitspakete, die von UniApp benötigt werden (falls npm wird zum Verwalten von Abhängigkeiten verwendet)

2. TabBar in UniApp

In UniApp besteht die TabBar aus mehreren unteren Navigationsregisterkarten. Der Benutzer kann verschiedene Seiten in der Anwendung anzeigen, indem er auf die entsprechende Registerkarte klickt .

TabBar kann in der gesamten Anwendung oder auf bestimmten Seiten angezeigt werden. Eine TabBar, die in einer Anwendung angezeigt wird, wird als globale TabBar bezeichnet, während eine TabBar, die auf bestimmten Seiten angezeigt wird, als lokale TabBar bezeichnet wird. Jede Seite kann anpassen, ob die TabBar angezeigt werden soll, wodurch das Anzeigen und Ausblenden der TabBar realisiert wird.

3. So steuern Sie das Anzeigen und Ausblenden der TabBar in UniApp

3.1 Verwenden Sie die Seitenkonfigurationsdatei

In UniApp verfügt jede Seite über eine Konfigurationsdatei, in der Sie festlegen können, ob auf der aktuellen Seite die untere TabBar angezeigt werden soll. In der Datei pages.json im Projektstammverzeichnis können Sie den Stil und den Seitenpfad der globalen TabBar festlegen. pages.json 文件中，可以设置全局 TabBar 的样式和页面路径。

在每个页面的 xxx.vue 文件所在目录下，都可以创建一个 xxx.json 配置文件（其中 xxx 表示当前页面的名称）。在该 xxx.json 文件中，可以通过设置 navigationBarHidden 属性来控制当前页面是否需要隐藏底部 TabBar。

以下是一个示例：

{
  "navigationBarTitleText": "我的页面",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarHidden": true  // 控制底部 TabBar 的显示和隐藏
}

在该配置文件中，设置 navigationBarHidden 属性为 true 可以隐藏底部 TabBar，设置为 false 则可以显示底部 TabBar。通过此方法，可以实现每个页面自己控制底部 TabBar 的显示和隐藏。

3.2 使用 Vue mixing

除了在页面配置文件中控制 TabBar 的显示和隐藏，也可以在 Vue 组件中使用 mixin 来实现控制 TabBar 显示和隐藏的功能。这种方式更加灵活，适用于页面中需要根据某些条件来动态控制 TabBar 显示和隐藏的情况。

以下是一个示例：

export default {
  mixins: [tabbarMixin],  // 引入 mixin 配置
  data() {
    return {
      isShowTabBar: true  // 控制 TabBar 显示和隐藏的状态
    }
  }
}

在上述示例中，通过 mixins 属性引入了一个名为 tabbarMixin 的 mixin 对象，该 mixin 对象配置了底部 TabBar 的显示和隐藏。通过定义一个名为 isShowTabBar 的状态变量，可以在组件中动态控制底部 TabBar 的显示和隐藏。

以下是 mixin 对象的具体配置：

export const tabbarMixin = {
  onShow() {
    // 显示底部 TabBar
    uni.setTabBarStyle({
      selectedColor: "#007AFF",
      backgroundColor: "#ffffff",
      borderStyle: "black"
    })
    uni.showTabBar()
  },
  onHide() {
    // 隐藏底部 TabBar
    uni.hideTabBar()
  }
}

通过调用 uni.showTabBar() 和 uni.hideTabBar() 方法，可以控制底部 TabBar 的显示和隐藏。此外，可以通过 uni.setTabBarStyle()

In dem Verzeichnis, in dem sich die Datei xxx.vue jeder Seite befindet, können Sie eine Konfigurationsdatei xxx.json erstellen (wobei xxx stellt den aktuellen Namen der Seite dar). In der Datei xxx.json können Sie steuern, ob die untere TabBar auf der aktuellen Seite ausgeblendet werden muss, indem Sie das Attribut navigationBarHidden festlegen.

Das Folgende ist ein Beispiel:

rrreee

Setzen Sie in dieser Konfigurationsdatei die Eigenschaft navigationBarHidden auf true, um die untere TabBar auszublenden, und setzen Sie sie auf false Sie können die untere TabBar anzeigen. Mit dieser Methode kann jede Seite das Ein- und Ausblenden der unteren TabBar steuern. <ol> <li>3.2 Vue-Mischung verwenden</li> <li>Zusätzlich zur Steuerung der Anzeige und Ausblendung von TabBar in der Seitenkonfigurationsdatei können Sie auch Mixin in der Vue-Komponente verwenden, um die Anzeige und Ausblendung von TabBar zu steuern. Diese Methode ist flexibler und eignet sich für Situationen, in denen das Anzeigen und Ausblenden der TabBar basierend auf bestimmten Bedingungen auf der Seite dynamisch gesteuert werden muss. </li> <li>Das Folgende ist ein Beispiel: </li>rrreee</ol>Im obigen Beispiel wird ein Mixin-Objekt mit dem Namen <code>tabbarMixin über das Attribut mixins eingeführt, das die untere TabBar-Anzeige konfiguriert verstecken. Durch Definieren einer Zustandsvariablen mit dem Namen isShowTabBar können Sie das Ein- und Ausblenden der unteren TabBar in der Komponente dynamisch steuern.

Das Folgende ist die spezifische Konfiguration des Mixin-Objekts:

rrreee

Durch Aufrufen der Methoden uni.showTabBar() und uni.hideTabBar() können Sie das steuern Ein- und Ausblenden der unteren TabBar . Darüber hinaus kann der Stil der unteren TabBar über die Methode uni.setTabBarStyle() festgelegt werden. 🎜🎜4. Weitere Hinweise🎜🎜In UniApp müssen Sie beim Steuern der Anzeige und des Ausblendens der unteren TabBar auf die folgenden Punkte achten: 🎜🎜🎜Bei der Steuerung der Anzeige und des Ausblendens der TabBar durch Ändern der Seitenkonfigurationsdatei , es muss auf der aktuellen Seite wirksam werden und muss bei Bedarf auf anderen Seiten verwendet werden. Wenn die Seite den Anzeige- und Ausblendungsstatus der TabBar ändert, muss sie in der Konfigurationsdatei der entsprechenden Seite geändert werden. 🎜🎜Da die untere TabBar in UniApp durch Komponenten implementiert wird, sollte die Komponente während des Seitenlayouts am unteren Rand der Seite platziert werden, um Benutzerklickvorgänge zu erleichtern. 🎜🎜Wenn Sie ein Mixin-Objekt verwenden, um die Anzeige und das Ausblenden der unteren TabBar zu steuern, müssen Sie auf die Benennung des Mixin-Objekts achten, um Namenskonflikte zu vermeiden. 🎜🎜🎜5. Zusammenfassung🎜🎜In der Einleitung dieses Artikels haben wir gelernt, wie man die Anzeige und das Ausblenden der unteren TabBar in UniApp steuert. Wir können das Ein- und Ausblenden der unteren TabBar steuern, indem wir die Seitenkonfigurationsdatei ändern oder ein Mixin-Objekt verwenden, das äußerst flexibel und anpassungsfähig ist. Gleichzeitig müssen Sie darauf achten, bestimmte Designspezifikationen in tatsächlichen Anwendungen zu befolgen und die TabBar am unteren Rand der Seite zu platzieren, um die Benutzerbedienung zu erleichtern. 🎜

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Anzeigen und Ausblenden der Tableiste in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!