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

最新推荐文章于 2023-06-06 18:06:16 发布

cm_xuan77

最新推荐文章于 2023-06-06 18:06:16 发布

阅读量2.1k

点赞数

分类专栏： weex

weex 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于模板的可滚动数据列表组件实现方法，包括头部、主体内容及底部结构。主体部分采用scroller组件实现上下滑动，并集成了下拉刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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