前言

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

1.window

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

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

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

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

2.tabbar

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

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

{
  "tabBar": {
    "color":"#000000",
    "selectedColor":"##F30E0E",
    "position":"bottom",
    "backgroundColor": "#ffffff",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁(yè)"
    },
      {
      "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.全局配置與局部頁(yè)面配置

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

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

最新評(píng)論