weex踩坑之旅第四彈 ~ weex頁面佈局（定位佈局）

習慣了web頁面的開發一開始還真不太適應weex的寫法，css有不少限制。不過期間長了感受也能夠，限制多，用的少，須要研究的東西也就少。對於weex的頁面佈局，我以爲有如下須要注意的點

1. 盒子模型

官方說的很明白，我這邊再提示一下：
Weex 盒模型的 box-sizing 默認爲 border-box，即盒子的寬高包含內容、內邊距和邊框的寬度，不包含外邊距的寬度。

css樣式目前不支持速寫形式，例如：border: 1 solid #ff0000; 的組合寫法，在書寫的時候須要單獨設定。

2. 定位佈局

Weex 支持 position 定位，用法與 CSS position 相似。爲元素設置 position 後，可經過 top、right、bottom、left 四個屬性設置元素座標。position的取值能夠爲：relative、absolute、fixed、sticky。定位佈局的細節我在這裏不贅述，若是須要了解，能夠自行google,我這裏只是說明應該在什麼場景下使用定位佈局。

3. 爲元素設定高度

因爲代碼最終運行的終端不必定，若是咱們直接給容器設定一個固定高度，在不一樣的環境下顯示可能不一樣。默認容器的高度由其內容決定。若是咱們想進行上中下佈局，上方下方容器的高度固定，均爲120px；剩餘的空間中間容器佔滿。實現方式有好多種，先使用定位佈局來實現。

<template>
    <!-- 容器的高度爲100%,默認定位爲相對定位，默認爲flex佈局 -->
    <div class='container'>
        <text>hello</text>
    </div>
</template>
<style scoped>
.container {
    background-color:#f4f4f4;
}
</style>

瞭解此基礎咱們再進行佈局。絕對定位相對距其最近的父元素（而且父元素爲相對定位元素）進行定位。

<template>
    <!-- 容器的高度爲100%,默認定位爲相對定位，默認爲flex佈局 -->
    <div class='container'>
        <!-- 頁面頭部 -->
        <div class="header">
            <text>頭部</text>
        </div>
        <!-- 頁面體部 -->
        <div class="content">
            <text>體部</text>
        </div>
        <!-- 頁面底部 -->
        <div class="footer">
            <text>腳部</text>
        </div>
    </div>
</template>
<style scoped>
.header {
    position: absolute;
    height: 120px;
    /*距離頂端爲0，即元素在屏幕最上方*/
    top: 0;    
    /*定位元素寬度由其內容決定，如下兩個屬性使得寬度爲屏幕100%*/
    left: 0;right: 0;
    background-color: #f4f4f4;
}
.content {
    position: absolute;
    /*距離頂端，底端120px,中間內容所有爲content*/
    top: 120px;bottom: 120px;
    /*定位元素寬度由其內容決定，如下兩個屬性使得寬度爲屏幕100%*/
    left: 0;right: 0;
    background-color: #ededed;
}
.footer {
    position: absolute;
    height: 120px;
    /*距離底端爲0，即元素在屏幕最下方*/
    bottom: 0;
    /*定位元素寬度由其內容決定，如下兩個屬性使得寬度爲屏幕100%*/
    left: 0;right: 0;
    background-color: #f4f4f4;
}
</style>

爲何要給容器設定高度呢？由於有些組件必須其父組件具備高度，好比<scroller>

佈局好了以後，咱們能夠在中間容器中放一個能夠滾動的組件，頭部腳部不動，中間內容滾動。

<template>
    <!-- 容器的高度爲100%,默認定位爲相對定位，默認爲flex佈局 -->
    <div class='container'>
        <!-- 頁面頭部 -->
        <div class="header">
            <text>頭部</text>
        </div>
        <!-- 頁面體部 -->
        <!-- 可滾動數據區域 -->
        <scroller class="content">
        <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
          <text class="indicator">下拉刷新數據</text>
        </refresh>
        <div class="cell" v-for="(num,index) in lists">
          <div class="panel">
            <text class='f1'>{{index}}</text>
            <text class="f3">{{num.name}}</text>
            <text class='f1'>{{num.gender}}</text>
          </div>
        </div>
      </scroller>
        <!-- 頁面底部 -->
        <div class="footer">
            <text>腳部</text>
        </div>
    </div>
</template>

css代碼片段以下

/*使用flex佈局顯示數據*/
.panel {
    height: 100px;
    flex-direction:row;
    justify-content:center;
    align-items: center;
    border-bottom-color: #ededed;
    border-bottom-width: 1px;
}
/*設定每一部分佔得份數*/
.f1{
    flex: 1;
    text-align: center;
}
/*設定每一部分佔得份數*/
.f3 {
    flex:3;
    text-align: center;
}

js代碼片段以下

export default {
        data:()=>({
            refreshing:false,
            lists:stuData
        }),
        methods:{
            //刷新
            onrefresh(){
                this.refreshing = true
        setTimeout(() => {
          this.refreshing = false
        }, 1000)
            }
        }
    }