zoukankan      html  css  js  c++  java
  • 添加底部导航栏tabbar

    效果图:

    如果要添加底部导航栏,最少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模式,这样在调试窗口可以看到具体的跳转信息等。

  • 相关阅读:
    阿蒂亚谈数学——我对《数学的统一性》的笔记
    陶哲轩实分析习题8.5.6
    陶哲轩实分析习题8.5.2
    陶哲轩实分析习题8.5.9
    陶哲轩实分析习题8.5.5
    陶哲轩实分析习题8.5.6
    陶哲轩实分析习题8.5.2
    陶哲轩实分析习题8.5.1
    陶哲轩实分析习题8.5.9
    陶哲轩实分析习题8.5.5
  • 原文地址:https://www.cnblogs.com/smart-zihan/p/13331465.html
Copyright © 2011-2022 走看看