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)
            }
        }
    }