1、效果图

 2、template代码

<template>
    <!-- 页面容器 -->
    <view class="page-wraper">
        <!-- 页面头部 -->
        <view class="page-header">
            标题栏
        </view>

        <!-- 页面主体 -->
        <view class="page-main">
            <scroll-view class="page-main-scroll" style="height: 100%" scroll-y="true" scroll-with-animation="true">
                <view class="page-main-list" v-for="(item,index) in list" :key="index">
                    {{item.cont}}
                </view>
            </scroll-view>
        </view>

        <!-- 页面底部 -->
        <view class="page-footer">
            <button type="primary">提交</button>
        </view>
    </view>
</template>

3、js代码

export default {
        data() {
            return {
                list: [{
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三=="
                    },
                ],
            }
        }
    }

3、css代码

<style>
    /* 设置页面背景色 */
    page {
        background-color: #ddd;
        width: 100%;
        height: 100%;
    }
</style>

页面样式：

<style lang="scss" scoped>
    .page-wraper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .page-header {
        background: rgb(8, 117, 94);
        color: #fff;
        line-height: 100rpx;
        /* 不放大不缩小固定100rpx */
        flex: 0 0 100rpx;
    }
    .page-main {
        flex: 1;
        position: relative;
    }
    .page-main-scroll {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .page-main-list {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #e0e0e0;

    }
    .page-footer {
        color: #fff;
        line-height: 100rpx;
        /* 不放大不缩小固定100rpx */
        flex: 0 0 100rpx;
        background-color: #00AAFF;
    }
</style>

 

原文地址：http://www.cnblogs.com/qiantao/p/16910796.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性