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

Comment composer la navigation inférieure dans Uniapp

coldplay.xixi
Libérer: 2023-01-13 00:44:15
original
3680 Les gens l'ont consulté

Méthode d'Uniapp pour composer la navigation inférieure : créez d'abord la page dans le répertoire des pages ; puis créez l'icône de navigation et enfin configurez la barre de tabulation sous le fichier [pages.json].

Comment composer la navigation inférieure dans Uniapp

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1, ordinateur Dell G3.

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

uniapp compose la méthode de navigation inférieure :

description du paramètre tabBar

  • color : couleur de la police de la barre de navigation

  • selectedColor : couleur de la police sélectionnée

  • backgroundColor : couleur d'arrière-plan inférieure

  • borderStyle : couleur de la bordure inférieure, ne peut être que "noir" ou "blanc"

  • liste : objet, incluant les options suivantes

{
pagePath:页面路径
text:底部导航文字
iconPath:没选中前的图标路径
selectedIconPath:选中后的图标路径
}
Copier après la connexion

Étape 1 : Créer une page dans le répertoire des pages

Comment composer la navigation inférieure dans Uniapp

Comment composer la navigation inférieure dans Uniapp

Voici le répertoire créé et le nom de la page (pour référence seulement)

Comment composer la navigation inférieure dans Uniapp

Étape 2 : Créer icônes de navigation

(1) Ouvrez la bibliothèque d'icônes vectorielles Alibaba (Iconfont)

(2) Recherchez l'icône appropriée et ajoutez-la au panier

( 3) Sélectionnez la couleur et le format appropriés à télécharger

Étape 3 : Configurez tabBar sous le fichier pages.json

{
      "pages":[
            ...
      ],
      "tabBar": {
"color":"#8a8a8a",
"selectedColor":"#00aa00",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list": [
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/home_normal.png",
"selectedIconPath":"static/home.png"
},
{
"pagePath":"pages/search/search",
"text":"发现",
"iconPath":"static/search_normal.png",
"selectedIconPath":"static/search.png"
},
{
"pagePath":"pages/me/me",
"text":"我的",
"iconPath":"static/me_normal.png",
"selectedIconPath":"static/me.png"
}
]
},
      "globalStyle": {
...
}
}
Copier après la connexion

Affichage de l'effet

Comment composer la navigation inférieure dans Uniapp

Recommandations d'apprentissage gratuites associées : Vidéo de programmation

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal