码迷,mamicode.com
首页 > 其他好文 > 详细

添加底部导航栏tabbar

时间:2020-07-17 19:25:56      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:sel   time   nap   win   json   信息   let   底部导航   nba   

效果图:

技术图片技术图片

 

 

如果要添加底部导航栏,最少2个,最多5个。

app.json

{
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/openapi/openapi",
    "pages/openapi/serverapi/serverapi",
    "pages/openapi/callback/callback",
    "pages/openapi/cloudid/cloudid",
    "pages/im/im",
    "pages/im/room/room"
  ],
  "window": {
    "backgroundColor": "#ddd",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "我的微信",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "tabBar": {
    "selectedColor": "#00ff00",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/2.jpg",
        "selectedIconPath": "images/1.jpg"
      },
      {
        "pagePath": "pages/im/im",
        "text": "日志",
        "iconPath": "images/4.jpg",
        "selectedIconPath": "images/3.jpg"
      }
  ]
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug":true

}

 

tabBar就是底部导航栏:

  • selectedColor:被选中时显示的颜色
  • borderStyle:导航栏与页面的边界,就是那个分隔线,当为white时,分隔线就看不见了。
  • pagePath:跳转页面的路径
  • text:显示文本
  • iconPath:导航图标路径
  • selectedIconPath:当选中时导航图标路径

networkTimeout是延时,单位是ms

debug是开启debug模式,这样在调试窗口可以看到具体的跳转信息等。

添加底部导航栏tabbar

标签:sel   time   nap   win   json   信息   let   底部导航   nba   

原文地址:https://www.cnblogs.com/smart-zihan/p/13331465.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!