uni-app如何編寫底部導航欄

 

 

 在pages.json中配置代碼如下：

{
 "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
  {
   "path": "pages/index/index",
   "style": {
    "navigationBarTitleText": "首頁",
    "navigationBarBackgroundColor":"#eee"
    
   }
  }

        ,{
            "path" : "pages/login/login",
            "style" : {
    "navigationBarTitleText": "動態",
    "navigationBarBackgroundColor":"#eee"
   }
        }
        ,{
            "path" : "pages/home/home",
            "style" : {
          "navigationBarTitleText": "發現",
    "navigationBarBackgroundColor":"#eee"
         }
        }
        ,{
            "path" : "pages/my/my",
            "style" : {
    "navigationBarTitleText": "我的",
    "navigationBarBackgroundColor":"#eee"
   }
        }
      
       
    ],
 "globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uni-app",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8"
 },
 
 "tabBar":{
  "color": "#cdcdcd",
          "selectedColor": "#39cffc",
          "borderStyle": "black",
          "backgroundColor": "#ffffff",
   "list": [{
                    "pagePath": "pages/index/index",
                    "iconPath": "static/icon/index.png",
                    "selectedIconPath": "static/icon/index1.png",
                    "text": "首頁"
                }, {
                    "pagePath": "pages/login/login",
                    "iconPath": "static/icon/login.png",
                    "selectedIconPath": "static/icon/login1.png",
                    "text": "發現"
                },
                {
                    "pagePath": "pages/home/home",
                    "iconPath": "static/icon/home.png",
                    "selectedIconPath": "static/icon/homes.png",
                    "text": "動態"
                }, {
                    "pagePath": "pages/my/my",
                    "iconPath": "static/icon/mys.png",
                    "selectedIconPath": "static/icon/mys.png",
                    "text": "我的"
                }]
 }
}

 

相應的效果如下：