小程序中控件里面的内容较多，让其支持滚动的良好方案

YSoup

已于 2022-06-25 09:43:34 修改

阅读量898

点赞数 1

分类专栏： css 文章标签：小程序微信小程序 css3

于 2022-06-25 09:36:42 首次发布

本文链接：https://blog.csdn.net/deep_rooted/article/details/125455347

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

对于写过安卓原生的人来说，可能会按照思维定式，在小程序里直接使用scroll-view去实现滚动。这其实一个糟糕的想法，因为微信小程序文档里面已经写有了，使用竖向滚动时，需要给scroll-view指定一个固定的高度，如下图：
在这里插入图片描述
我也是醉了，当列表的内容比较少的时候，指定固定高度，那肯定会留下很多剩余空间，你说丑不丑？例如下图，灰色区域是滚动区域，列表只有两个项目：

在这里插入图片描述
我想要做的效果是，让滚动区域刚好包裹住里面的内容，只有高到一定程度了，才出现滚动效果。我尝试过给scroll-view标签加上height:fit-content以及指定max-height属性，但对于scroll-view来说，这压根没用。

解决办法

解决办法其实很简单，使用css的overflow属性就可以了，不要去使用scroll-view标签，代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>滚动测试</title>
    <style>
        .scrollDiv {
            max-height: 200px;
            background: #aaa;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="scrollDiv">
        <ol>
            <li>奶牛猫</li>
            <li>橘猫</li>


        </ol>
    </div>
</body>

</html>

指定了overflow: auto和最大高度max-height: 200px;之后，就可以达到我想要的效果了。内容高度不足200px时，是没有滚动效果的，当猫的种类越来越多，内容高度超过了200px后，就会出现滚动效果。采用这种方式，就不会出现滚动区域内有大量空白的情况。当然，这里我是直接拿HTML举例的，以上的css样式在小程序中同样适用哈。