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": "我的"
                }]
 }
}

 

相应的效果如下：