Développement de la colonne de navigation inférieure du mini programme WeChat (avec code)

Cet article présente principalement des informations pertinentes sur le développement de la colonne Navigation (avec code) en bas du mini programme WeChat. Je voulais avoir une belle colonne de navigation en bas du mini programme WeChat. programme, mais je ne savais pas comment le créer, alors Baidu a trouvé cet article et l'a partagé avec tout le monde. Les amis qui en ont besoin peuvent s'y référer

Développement de la colonne de navigation inférieure de WeChat mini. programme

Jetons d'abord un coup d'oeil aux rendus

Ici, nous avons ajouté trois icônes de navigation, car nous avons trois pages , et l'applet WeChat peut en ajouter jusqu'à 5.

Alors comment apparaissent-ils et comment sont-ils colorés ? C'est fait en deux étapes !

1. Préparation des icônes

Nous entrons sur le site Web, passons la souris sur une icône que nous aimons et cliquons sur le bouton de téléchargement ci-dessous

Sélectionnez deux icônes de couleurs différentes dans la boîte contextuelle et sélectionnez la taille de 64px. J'ai choisi png, puis téléchargez-le et donnez-lui un alias <.>

Enregistrez l'icône nommée ci-dessus dans le dossier images nouvellement créé dans le répertoire du projet du mini programme

Les préparatifs sont terminés

2. Changer le

fichier de configuration On retrouve le fichier de configuration app dans le répertoire racine du projet <.>json

Ajoutez les informations de configuration suivantes

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首页" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "开心测试" 
  }] 
 },

Expliquez l'

attribut

information

tabBar correspondant fait référence à l'attribut de configuration de la navigation inférieure

color La couleur du texte de navigation inférieur lorsqu'il n'est pas sélectionné

selectedColor La couleur du texte de navigation inférieur lorsqu'il est sélectionné

borderStyle L'échantillon de couleur de la bordure inférieure de navigation (Remarque : si aucun style n'est écrit ici, la ligne gris clair par défaut apparaîtra sur la bordure supérieure de la boîte de navigation)

liste Configuration de navigation

Array

selectedIconPath Chemin de l'icône lorsqu'il est sélectionné

iconPath Chemin de l'icône lorsqu'il n'est pas sélectionné

pagePath Adresse d'accès à la page

text Texte sous l'icône de navigation

Merci pour la lecture, j'espère que cela pourra aider tout le monde, merci pour votre avis sur cet article Support du site !

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!