Was soll ich tun, wenn auf der Uniapp-Seite keine Tableiste vorhanden ist?

Wenn wir UniApp zur Entwicklung mobiler Anwendungen verwenden, müssen wir der Seite häufig eine untere TabBar hinzufügen. Manchmal stellen wir jedoch fest, dass die TabBar unten nicht angezeigt wird, wenn UniApp zum Entwickeln der Seite verwendet wird. Dies liegt daran, dass die Seite in UniApp standardmäßig keine TabBar enthält und wir sie manuell hinzufügen müssen.

Also, wie füge ich TabBar zur UniApp-Seite hinzu? Im Folgenden werden wir es Schritt für Schritt vorstellen.

Zuerst müssen wir die TabBar-Komponente zur App.vue-Datei hinzufügen. Öffnen Sie die App.vue-Datei, suchen Sie den Code unter dem Vorlagen-Tag und fügen Sie das folgende TabBar-Tag hinzu:

<tabbar>
  <tabbar-item icon="home" title="首页" path="/pages/index/index"></tabbar-item>
  <tabbar-item icon="search" title="搜索" path="/pages/search/search"></tabbar-item>
  <tabbar-item icon="cart" title="购物车" path="/pages/cart/cart"></tabbar-item>
  <tabbar-item icon="user" title="我的" path="/pages/user/user"></tabbar-item>
</tabbar>

Im obigen Code haben wir 4 TabBar-Menüs hinzugefügt, nämlich „Home“ und „Suchen“. , „Warenkorb“ und „Mein“ und geben Sie die entsprechenden Seitenpfade an. Unter diesen wird jedes TabBar-Menü durch das Tag tabbar-item dargestellt, das drei Attribute enthält: Symbol, Titel und Pfad, die jeweils das Symbol, den Titel und den Pfad der entsprechenden Seite des Menüs darstellen.

Als nächstes müssen wir jeder Seite Seitenpfade hinzufügen. Öffnen Sie die Seite, auf der Sie TabBar hinzufügen möchten, z. B. index.vue auf der Startseite, suchen Sie den Export-Standardcodeblock unter dem Skript-Tag und fügen Sie den folgenden Code hinzu:

export default {
  onShow() {
    uni.setTabBarItem({
      index: 0,
      text: '首页',
      iconPath: '/static/tabBar/home.png',
      selectedIconPath: '/static/tabBar/home-active.png'
    })
  }
}

Im obigen Code Wir verwenden die Lebenszyklusfunktion onShow, um das TabBar-Menü der aktuellen Seite festzulegen. Unter anderem wird die Funktion setTabBarItem verwendet, um die Eigenschaften eines bestimmten Menüs von TabBar festzulegen, einschließlich der vier Eigenschaften index, text, iconPath und selectedIconPath. Hier legen wir die Eigenschaften des „Home“-Menüs fest, einschließlich des Menüindex, des Titels, des Symbols im Normalzustand und des Symbols im ausgewählten Zustand.

Zuletzt müssen wir den Pfad jeder Seite in der Konfigurationsdatei „pages.json“ definieren. Öffnen Sie die Konfigurationsdatei „pages.json“ und fügen Sie den folgenden Code hinzu:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/search/search",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/user/user",
      "style": {}
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabBar/home.png",
        "selectedIconPath": "/static/tabBar/home-active.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "/static/tabBar/search.png",
        "selectedIconPath": "/static/tabBar/search-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/static/tabBar/cart.png",
        "selectedIconPath": "/static/tabBar/cart-active.png",
        "badge": 0
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/static/tabBar/user.png",
        "selectedIconPath": "/static/tabBar/user-active.png"
      }
    ]
  }
}

Im obigen Code definieren wir die Pfade von vier Seiten und definieren die Eigenschaften des TabBar-Menüs im tabBar-Attribut, einschließlich page Pfad, Menütext, Menüsymbol im Normalzustand und Menüsymbol im ausgewählten Zustand.

An diesem Punkt sind die Schritte zum Hinzufügen des TabBar-Menüs abgeschlossen. Wir können die UniApp-Anwendung neu kompilieren, um den Effekt zu sehen. Wenn alles gut geht, wird unten auf der Seite das TabBar-Menü angezeigt.

Im Allgemeinen enthält UniApp das TabBar-Menü nicht standardmäßig und wir müssen es manuell hinzufügen. Durch Hinzufügen der TabBar-Komponente zur App.vue-Datei, Hinzufügen des Seitenpfads zu jeder Seite und Definieren der Eigenschaften des TabBar-Menüs in der Konfigurationsdatei „pages.json“ können Sie die TabBar-Menüfunktion einfach implementieren.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn auf der Uniapp-Seite keine Tableiste vorhanden ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!