Maison > Applet WeChat > Développement de mini-programmes > Onglet de développement de l'applet WeChat (TabBar en bas de la fenêtre) implémentation du changement de page

Onglet de développement de l'applet WeChat (TabBar en bas de la fenêtre) implémentation du changement de page

PHPz
Libérer: 2018-05-15 14:17:20
original
5344 Les gens l'ont consulté

Cet article présente principalement les connaissances pertinentes sur le changement de page d'onglet (TabBar en bas de la fenêtre) dans le développement d'applets WeChat. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Il est très simple et pratique de changer de page dans la barre d'onglets en bas de la fenêtre pendant le développement de l'applet WeChat.

Code :

1.app.json

//app.json 
{ 
 "pages":[ 
  "pages/index/index", 
  "pages/logs/logs" 
 ], 
 "window":{ 
  "backgroundTextStyle":"light", 
  "navigationBarBackgroundColor": "#999999", 
  "navigationBarTitleText": "tab", 
  "navigationBarTextStyle":"white" 
 }, 
  "tabBar": { 
  "color": "#ccc", 
  "selectedColor": "#35495e", 
  "borderStyle": "white", 
  "backgroundColor": "#f9f9f9", 
  "list": [ 
   { 
    "text": "首页", 
    "pagePath": "pages/index/index", 
    "iconPath": "images/home.png", 
    "selectedIconPath": "images/home-actived.png" 
   }, 
   { 
    "text": "目录", 
    "pagePath": "pages/catalogue/catalogue", 
    "iconPath": "images/note.png", 
    "selectedIconPath": "images/note-actived.png" 
   }, 
   { 
    "text": "我的", 
    "pagePath": "pages/mine/mine", 
    "iconPath": "images/profile.png", 
    "selectedIconPath": "images/profile-actived.png" 
   } 
  ] 
 } 
}
Copier après la connexion

pagePath est le chemin de la page iconPath. est le chemin de l'image et la taille de l'icône est limitée à 40 Ko.

selectedIconPath : Le chemin de l'image lorsqu'il est sélectionné, la taille de l'icône est limitée à 40 Ko

La barre d'onglets a un maximum de 5 et un minimum de 2.

Écrivez la page dans le répertoire des pages pour basculer.

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!

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