scroll-view自动适应高度，不定高度-Toy模板网

这篇具有很好参考价值的文章主要介绍了scroll-view自动适应高度，不定高度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

定高不友好

在前端工作开发中，我们常常会遇到如图需求。

实现也很简单内容区域使用scroll-view标签包裹住，内容超出就可以滚动了。

但是！！！

scroll-view需要设置一个高度值，它才可以滚动，如：height: 300rpx。但是这并不友好

高度值我们是不应该写死而是让它灵活自适应我们可以用到flex布局去实现

代码块

我这里是uni-app的语法文章来源地址https://www.toymoban.com/news/detail-508068.html

<template>
    <view class="menber-container">
        <view class="header"></view>
        <view class="scroll-container">
            <scroll-view class="scroll-view" scroll-y="true" style="height: cacl(100% - 10rpx)">
                   <view style="height: 60rpx; line-height: 60rpx;" v-for="item in 20">
                        <view>我是模拟内容：{{item}}</view>
                    </view>
                    <u-button text="联系客服" openType="contact" shape="circle"
                        customStyle="background-color: #FD773B; font-size: 28rpx; color: #fff; height: 76rpx; width: 80%;border: none">
                    </u-button>
             </scroll-view>
        </view>
    </view>
</template>

<style lang="less" scoped>
    .menber-container {
        display: flex;
        flex-direction: column;// flex垂直布局
        height: 100vh;// 必须写100vh，小程序上100%可能无法继承高度
        overflow: hidden;
    }
    .header {
        height: 120rpx;
        background-color: #E91083;
    }

    .scroll-container {
        flex: 1;// 达到高度自适应
        overflow: scroll;// 关键代码，溢出的部分显示滚动条 不溢出也显示
    }
</style>

到了这里，关于scroll-view自动适应高度，不定高度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！