前言

每個(gè)頁面按照結(jié)構(gòu)可以分成三部分:window page tabbar.其中window和tabbar一般比較固定，page是平常業(yè)務(wù)開展的主要載體，根據(jù)業(yè)務(wù)需求進(jìn)行頁面配置。下面主要講一下window和tabbar。

1.window

     window用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。每個(gè)頁面可以由以下四個(gè)部分組成(最下面的tabbar單獨(dú)講述，此處不體現(xiàn))。其中navigationBar和backgroud都可以在window中進(jìn)行配置，前者就是導(dǎo)航欄，進(jìn)入到小程序就會顯示,后者是背景窗口，就是平常下拉時(shí)顯示的區(qū)域。

簡單介紹一下window中常用的配置項(xiàng):

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

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

2.tabbar

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

簡單介紹一下tabbar的常用配置項(xiàng):

{
  "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:選中時(shí)的圖片路徑；
    selectedColor:選選中時(shí)的顏色;
    borderStyle:tabbar 上邊框的顏色， 僅支持 black / white;
    iconPath:圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片;
    color:tabbar的顏色；

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

    uniapp中每個(gè)項(xiàng)目中都會有app.json配置文件,定義的配置項(xiàng)對全局生效。項(xiàng)目中每個(gè)頁面都在pages文件夾下以單獨(dú)文件夾的形式存在，每個(gè)頁面都一個(gè)對應(yīng)的json文件,定義的配置項(xiàng)是對所在頁面生效。當(dāng)全局配置app.json與頁面配置json中配置項(xiàng)相同時(shí)，會優(yōu)先按照頁面配置信息進(jìn)行生效。

以上就是uni-app入門頁面布局之window和tabbar的詳細(xì)內(nèi)容，更多關(guān)于uni-app頁面布局的資料請關(guān)注腳本之家其它相關(guān)文章！