一.window

1.全局配置文件及常用的配置项

2.了解window节点常用配置项

3.配置具体说明

  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#bbbbbb",
    "navigationBarTitleText": "🐏了个🐏",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },

4.设置上拉触底的距离

概念:手指在屏幕上的上拉滑动操作,从而加载更多数据的行为.

设置步骤:app,json->window->为onReachBottomDistance设置新的数值

二. tabBar

1.什么是tabBar

tabBar就是导航栏,用于实现多页面的快速切换

底部tabBar

顶部tabBar

注意:

tabBar中只能配置最少两个,最多5个tab页签

当渲染顶部tabBar时,不显示icon,只显示文本

2.tabBar的6个组成部分

backgroundColor:tabBar的背景色
selectedIconPath:选中时的图片路径
borderStyle:tabBar上边框的颜色
iconPath:未选中时的图片路径
selectedColor:tab上的文字选中时的颜色
color:tabBar上文字的默认(未选中)颜色

3.tabBar 节点的配置项

注意:至少要有list一项

4.每个tab项的配置选项

找到自己喜欢的图片(下载可以去iconfont-阿里巴巴矢量图标库)

then,在app.json中和pages,window平级,新增tabBar节点:

"tabBar": {
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/image/tabs/Leftbar_index_unselected.png",
        "selectedIconPath": "/image/tabs/Leftbar_index_selected.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "购物",
        "iconPath": "/image/tabs/Leftbar_shop_unselected.png",
        "selectedIconPath": "/image/tabs/Leftbar_shop_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/image/tabs/Leftbar_mine_unselected.png",
        "selectedIconPath": "/image/tabs/Leftbar_mine_selected.png"
      }
    ]
  },

注意 :app.json的list中的页面排序需要和app.json中的pages排序一样,否则导航栏的效果出不来

最后,实现效果展示:

全局配置(window+tabBar)