uni-app入門頁面佈局之window和tabbar詳解

Posted on by

前言

每個頁面按照結構可以分成三部分:window page tabbar.其中window和tabbar一般比較固定，page是平常業務開展的主要載體，根據業務需求進行頁面配置。下面主要講一下window和tabbar。

1.window

     window用於設置小程序的狀態欄、導航條、標題、窗口背景色。每個頁面可以由以下四個部分組成(最下面的tabbar單獨講述，此處不體現)。其中navigationBar和backgroud都可以在window中進行配置，前者就是導航欄，進入到小程序就會顯示,後者是背景窗口，就是平常下拉時顯示的區域。

在這裡插入圖片描述

簡單介紹一下window中常用的配置項:

{
  "window": {
    "navigationBarBackgroundColor": "#3BF312",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app入門",
    "backgroundColor":"#ffffff",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh":true
  }
}

     navigationBarBackgroundColor：導航狀態欄的背景顏色，此處設置為綠色；
     navigationBarTextStyle：導航狀態欄中文字的顏色；
     navigationBarTitleText：導航狀態欄輸入的文字，此處輸入uni-app入門；
     backgroundColor：下拉時顯示的背景窗口的背景色，一般都是白色；
     backgroundTextStyle：下拉時顯示的三個點的顏色；
     enablePullDownRefresh：是否支持下拉刷新；
     上述配置效果如下：

在這裡插入圖片描述

2.tabbar

    tabbar就是小程序中最下面的部分，常用的屬性如下:

在這裡插入圖片描述

簡單介紹一下tabbar的常用配置項:

{
  "tabBar": {
    "color":"#000000",
    "selectedColor":"##F30E0E",
    "position":"bottom",
    "backgroundColor": "#ffffff",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    },
      {
      "pagePath": "pages/logs/logs",
      "text": "消息"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的"
    }]
  }
}

    backgroundColor:tabbar背景顏色；
    selectedIconPath:選中時的圖片路徑；
    selectedColor:選選中時的顏色;
    borderStyle:tabbar 上邊框的顏色， 僅支持 black / white;
    iconPath:圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片;
    color:tabbar的顏色；

3.全局配置與局部頁面配置

    uniapp中每個項目中都會有app.json配置文件,定義的配置項對全局生效。項目中每個頁面都在pages文件夾下以單獨文件夾的形式存在，每個頁面都一個對應的json文件,定義的配置項是對所在頁面生效。當全局配置app.json與頁面配置json中配置項相同時，會優先按照頁面配置信息進行生效。

以上就是uni-app入門頁面佈局之window和tabbar的詳細內容，更多關於uni-app頁面佈局的資料請關註WalkonNet其它相關文章！

推薦閱讀：