Applet WeChat définissant la barre de navigation inférieure

1. Introduction

Voyons d'abord les rendus :

Avis:

• Le nombre maximum de barres de navigation est de 5 et le minimum est de deux.

2. Préparation des icônes

Bibliothèque d'icônes Ali http://www.iconfont.cn/collections/show/29
Nous entrons sur le site Web, sélectionnons l'icône dont nous avons besoin, cliquez sur le bouton de téléchargement ci-dessous, comme la page d'accueil, et téléchargez le fichier png correspondant.

3. Paramètres de la barre d'onglets du petit programme

pages.jsonConfigurez le code suivant dans le fichier :

{
    
    
  "easycom": {
    
    
    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
  },
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
    
    
      "path": "pages/home/home",
      "style": {
    
    
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/monitor/monitor",
      "style": {
    
    
        "navigationBarTitleText": "监控",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/alarm/alarm",
      "style": {
    
    
        "navigationBarTitleText": "告警",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/user/user",
      "style": {
    
    
        "navigationBarTitleText": "",
        "navigationStyle": "custom"
      }
    }
  ],
 "tabBar": {
    
    
    "color": "#000000",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
    
    
        "pagePath": "pages/home/home",
        "iconPath": "static/img/tabbar/home.png",
        "selectedIconPath": "static/img/tabbar/home_active.png",
        "text": "首页"
      },
      {
    
    
        "pagePath": "pages/monitor/monitor",
        "iconPath": "static/img/tabbar/monitor.png",
        "selectedIconPath": "static/img/tabbar/monitor_active.png",
        "text": "监控"
      },
      {
    
    
        "pagePath": "pages/alarm/alarm",
        "iconPath": "static/img/tabbar/alarm.png",
        "selectedIconPath": "static/img/tabbar/alarm_active.png",
        "text": "告警"
      },
      {
    
    
        "pagePath": "pages/user/user",
        "iconPath": "static/img/tabbar/my.png",
        "selectedIconPath": "static/img/tabbar/my_active.png",
        "text": "我的"
      }
    ]
  },

  "globalStyle": {
    
    
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }

Explication des paramètres de la barre d'onglet :

paramètre	expliquer
couleur	La couleur du texte de navigation du bas lorsqu'il n'est pas sélectionné
CouleurSélectionnée	Définir la couleur du texte sélectionné
style de bordure	L'échantillon de couleur de la bordure de navigation inférieure (notez que s'il n'y a pas de style écrit ici, la ligne gris clair par défaut apparaîtra sur la bordure supérieure de la boîte de navigation)
Couleur de l'arrière plan	Couleur de fond de la barre de navigation
liste	Tableau de configuration de la navigation
pagePath	adresse d'accès aux pages
iconPath	icône de navigation
selectedIconPath	Icône de navigation dans l'état sélectionné
texte	texte de navigation