Que dois-je faire s'il n'y a pas de barre d'onglets sur la page uniapp ?

Lorsque nous utilisons UniApp pour développer des applications mobiles, nous rencontrons souvent le besoin d'ajouter une TabBar inférieure à la page. Cependant, nous constatons parfois que la TabBar en bas ne s'affiche pas lors de l'utilisation d'UniApp pour développer la page. En effet, dans UniApp, la page ne contient pas TabBar par défaut et nous devons l'ajouter manuellement.

Alors, comment ajouter TabBar à la page UniApp ? Ci-dessous, nous le présenterons étape par étape.

Tout d'abord, nous devons ajouter le composant TabBar dans le fichier App.vue. Ouvrez le fichier App.vue, recherchez le code sous la balise template et ajoutez la balise TabBar suivante :

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

Dans le code ci-dessus, nous avons ajouté 4 menus TabBar, à savoir "Accueil", "Recherche", "Panier" et "Moi" et spécifiez leurs chemins de page correspondants. Parmi eux, chaque menu TabBar est représenté par la balise tabbar-item, qui contient trois attributs : icon, title et path, qui représentent respectivement l'icône, le titre et le chemin de la page correspondante du menu.

Ensuite, nous devons ajouter des chemins de page à chaque page. Ouvrez la page où vous souhaitez ajouter une TabBar, telle que index.vue sur la page d'accueil, recherchez le bloc de code d'exportation par défaut sous la balise script et ajoutez le code suivant :

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

Dans le code ci-dessus, nous utilisons la vie onShow fonction cycle pour définir le menu TabBar de la page actuelle. Parmi elles, la fonction setTabBarItem est utilisée pour définir les propriétés d'un certain menu de TabBar, y compris les quatre propriétés d'index, text, iconPath et selectedIconPath. Ici, nous définissons les propriétés du menu "Accueil", y compris l'index du menu, le titre, l'icône à l'état normal et l'icône à l'état sélectionné.

Enfin, nous devons définir le chemin de chaque page dans le fichier de configuration pages.json. Ouvrez le fichier de configuration pages.json et ajoutez le code suivant :

{
  "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"
      }
    ]
  }
}

Dans le code ci-dessus, nous définissons les chemins de quatre pages et définissons les propriétés du menu TabBar dans l'attribut tabBar, y compris le chemin de la page, le texte du menu et état normal. Icône de menu et icône de menu dans l’état sélectionné.

À ce stade, les étapes pour ajouter le menu TabBar sont terminées. Nous pouvons recompiler l'application UniApp pour voir l'effet. Si tout se passe bien, vous pouvez voir le menu TabBar affiché en bas de la page.

En général, UniApp n'inclut pas le menu TabBar par défaut et nous devons l'ajouter manuellement. En ajoutant le composant TabBar au fichier App.vue, en ajoutant le chemin de page à chaque page et en définissant les propriétés du menu TabBar dans le fichier de configuration pages.json, vous pouvez facilement implémenter la fonction de menu TabBar.

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!