Comment implémenter la fonction d'option d'onglet de la page d'accueil dans le mini programme

Cet article présente principalement la méthode d'implémentation de la fonction d'option d'onglet sur la page d'accueil du mini programme. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. Rendu :

Pour implémenter l'option de l'onglet inférieur, il vous suffit de la modifier dans l'application .json dans le répertoire racine du projet

Sur la photo :

-------- ----- --------------------------------------------- ----- -------------------------------------

Introduisez d'abord le fichier app.json

默认有两个代码块：1、pages
这里注册了当前小程序的所有页面路径2、window
这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档，本文章不做介绍

Jetons un coup d'œil à un autre élément de configuration fourni par app.json : tabBar

tabBar fournit certains attributs publics pour la configuration des onglets :

Il existe également des attributs pour la configuration pour chaque onglet individuel :

Schéma officiel ：

Implémenter spécifiquement la fonction Tab inférieure :

Définir Définir une exigence. Supposons que nous ayons actuellement deux onglets, un « Accueil » et un « Mon » ; le noir n'est pas sélectionné et le rouge est sélectionné.

1. Créez deux répertoires sous le répertoire pages et créez les fichiers associés js, json, wxml et wxss souhaités

Le nom est arbitraire, voici des exemples : répertoire personnel (lié à l'onglet de la page d'accueil), répertoire mien (lié à mon onglet)

 

2. Créez un nouveau répertoire dans le répertoire racine et nommez-le images (choisissez ce que vous voulez) pour stocker les images

1. Téléchargez-en quelques-unes. à partir de la bibliothèque de matériaux Ali. Notez que les images d'onglets doivent télécharger des images dans les états cliqué et non cliqué.

2. Copiez les ressources d'images dans le répertoire que vous avez créé pour stocker les images

3. Configuration du fichier app.json

1. Configurez tous les chemins de pages du projet dans l'attribut pages Dans notre exemple, il n'y en a que deux, home, mine

"pages":[    "pages/home/home",    "pages/mine/mine"
  ]

2. Ajouter des attributs Tabbar pour définir certains états

Selon l'explication de la partie précédente de l'article, la configuration de certains attributs nécessaires

"tabBar":{
    "color": "#333333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"主页",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home_selected.png"
        
      },
      {
        "pagePath":"pages/mine/mine",
        "text":"我的",
        "iconPath": "images/mine.png",
        "selectedIconPath":"images/mine_selected.png"
      }
    ]
  }

Quatre, Configuration de pages individuelles

　Une page contient js, hson, wxml, wxss et d'autres fichiers associés.

Pas d'introduction plus détaillée ici, ajoutez simplement une petite exigence, cliquez sur l'onglet pour passer à la page concernée, le titre de la page doit être cohérent avec l'onglet et le contenu de la page. Il est également cohérent avec l'onglet et est utilisé pour illustrer que l'effet d'onglet est correctement implémenté.

1. Définissez le titre de la page d'une page distincte. Cette exigence est configurée dans le fichier json.

L'hébergeur doit ajouter des attributs dans le fichier json sous le chemin d'une page séparée :

Document officiel 2. Affichez le texte cohérent avec l'onglet sur la page

La construction du contenu de la page (code de dessin de l'interface utilisateur) est configurée et implémentée dans le fichier wxml sous un chemin de page distinct.

　

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez node.js pour appeler baidu-aip-SDK pour réaliser la fonction de reconnaissance de carte d'identité

Introduction au composant pop-up modal de l'applet WeChat

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!