weex -- 上下滚定，中间滚动 页面

<template>
    <div class='container'>
        <div class="header">
            <text>头部</text>
        </div>

        <div class="content">
            <!-- 可滚动数据区域 -->
            <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>

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

参考链接 ## https://segmentfault.com/a/1190000012614035