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

不言
Libérer: 2018-07-14 14:12:52
original
2393 Les gens l'ont consulté

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
这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档,本文章不做介绍
Copier après la connexion

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

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!

É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