À propos de l'utilisation de tabBar dans le mini-programme WeChat (tutoriel détaillé)

Cet article présente principalement l'utilisation de tabBar dans le mini-programme WeChat et analyse en détail la fonction, l'utilisation des éléments de configuration et les précautions de fonctionnement de tabBar dans le mini-programme WeChat avec des exemples. Il est également livré avec un code source de démonstration complet pour les lecteurs. télécharger et s'y référer. Les amis peuvent se référer à

Cet article explique l'utilisation de tabBar dans l'applet WeChat avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Principe : Configurez l'attribut tabBar dans app.json

{
 "pages": [
  "index",
  "picDisplay"
 ],
 "window": {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "首页",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false
 },
 "tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }
}

3. Code clé

"tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

4. Méthode de fonctionnement

Créer un nouveau projet et ouvrez le fichier app .json, copiez le code clé dans "window": {} et faites attention à ajouter une virgule avant les accolades de la fenêtre, comme indiqué ci-dessous

Configurez la valeur de l'attribut tabBar

"tabBar": {
  //设置tabBar文字默认颜色
  "color":"#666666",
  //设置tabBar文字被选中是的颜色
  "selectedColor":"#06bd04",
  //tab列表，数组类型，改数组内至少要有两个但不大于5个的tab对象
  "list": [{
   //设置tab跳转页面链接
   "pagePath": "index",
   //设置tab上的文字
   "text": "首页",
   //设置tab上的默认图标
   "iconPath": "images/index.png",
   //设置tab被选中时的图标
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

Les 5 attributs communs et instructions de configuration de TabBar :

1) color : Aucune couleur de police selected

2 ) selectedColor : Sélectionnez la couleur de la police

3) borderStyle : La couleur de la ligne au-dessus de la barre de tabulation blanche (uniquement blanc et les noirs sont pris en charge)

4) backgroundColor:tabbar background color

5) list : Définir les éléments de la liste rab (minimum 2, maximum 5 onglets ).

De plus, list est un attribut de tableau, et chaque élément est un objet. List peut définir 4 attributs :

① text : Définir. le texte sur l'onglet

② iconPath : Définissez le chemin de l'image affiché lorsque l'onglet est inactif.

③ selectedIconPath : Définissez le chemin de l'image lorsque l'onglet est actif (les limites de taille d'image iconPath et selectedIconPath sont toutes deux de 40 Ko)

④ pagePath : Définissez le chemin de la page de saut lorsque l'on appuie sur l'onglet (Cette page doit être configurée en pages)

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas utilisé à l'avenir Utile à tout le monde.

Articles connexes :

Comment implémenter le débogage des points d'arrêt des fichiers ts dans Angular2

Comment implémenter le chargement paresseux des routes dans vue- router

Comment créer un cône en utilisant JS+canvas

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!