Maison> interface Web> uni-app> le corps du texte

Comment afficher la barre d'onglets dans Uniapp

coldplay.xixi
Libérer: 2020-12-17 10:22:14
original
11011 Les gens l'ont consulté

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】

Comment afficher la barre d'onglets dans Uniapp

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": "展示" }] } }
    Copier après la connexion
    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)

Comment afficher la barre donglets dans Uniapp

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!