Comment afficher la barre d'onglets dans Uniapp

Comment afficher la barre d'onglets dans uniapp : Tout d'abord, le premier élément du tableau pages représente la page de démarrage de l'application ; puis configurez-le dans le fichier [page.js], le code est ["path" : "pages /show/show ","style" : {"navigationBarT】

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1, cette méthode convient à toutes les marques d'ordinateur

Recommandé (gratuit) : tutoriel de développement uni-app

Comment afficher la barre de tabulations dans uniapp ：

Tout d'abord, consultez le site officiel pour en savoir plus sur tabBar

Si l'application est une application multi-onglets, vous pouvez spécifier les performances de la barre d'onglets via l'élément de configuration tabBar, et la page correspondante affichée lors du changement d'onglet

• Lorsque la position est réglée en haut, l'icône ne sera pas affichée

• La liste dans tabBar est un tableau et ne peut être configurée qu'avec au moins 2, jusqu'à 5 onglets, les onglets sont triés dans l'ordre du tableau

La barre d'onglets peut ne pas être rendue à temps lorsqu'elle est chargée pour la première fois. Vous pouvez d'abord la charger dans le cycle de vie onLoad de chaque page de barre d'onglets. Un flocon de neige en attente apparaît (hello uni-app utilise cette méthode)
• <.>
  Une fois la page de la barre d'onglets affichée une fois, elle restera dans la mémoire. Changer à nouveau la page de la barre d'onglets déclenchera uniquement chaque page onShow ne déclenchera plus onLoad.
La barre d'onglets supérieure n'est actuellement prise en charge que sur l'applet WeChat. Si vous devez utiliser l'onglet supérieur, il est recommandé de ne pas utiliser le paramètre supérieur de la barre d'onglets. Pour créer vous-même l'onglet supérieur, vous pouvez vous référer à hello uni. -app->Template->Onglet supérieur
2. Configurez

• {
  "pages": [ //pages数组中第一项表示应用启动页，
  {
  "path": "pages/index/index",
  "style": {
  "navigationBarTitleText": "uni-app"
  }
  }
      ,{
              "path" : "pages/show/show",
              "style" : {
  "navigationBarTitleText": "show"
  }
          }
          ,{
              "path" : "pages/component/component",
              "style" : {
  "navigationBarTitleText": "component"
  }
          }
      ],
  "globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uni-app",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
      "color": "#F0AD4E",
      "selectedColor": "#3cc51f",
      "borderStyle": "black",
      "backgroundColor": "#F8F8F8",
      "list": [{
          "pagePath": "pages/index/index",
          "iconPath": "static/logo.png",
          "selectedIconPath": "static/logo.png",
          "text": "首页"
      },{
          "pagePath": "pages/component/component",
          "iconPath": "static/logo.png",
          "selectedIconPath": "static/logo.png",
          "text": "组件"
      }, {
          "pagePath": "pages/show/show",
        "iconPath": "static/logo.png",
        "selectedIconPath": "static/logo.png",
          "text": "展示"
      }]
  } 
  }

  Au début, je ne savais pas pourquoi. ne s'affiche pas lorsque j'ai configuré deux pages dans "tabBar", mais cela a réussi après avoir configuré trois pages. Je me demande si vous avez rencontré ce problème
  Bon, la configuration est réussie, le rendu est le suivant

Recommandations d'apprentissage gratuites associées :

programmation php

(vidéo)

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!