当前位置：网站首页>小程序中控件里面的内容较多，让其支持滚动的良好方案

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

2022-06-26 12:32:00 【YSoup】

前言

对于写过安卓原生的人来说，可能会按照思维定式，在小程序里直接使用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样式在小程序中同样适用哈。

原网站

版权声明
本文为[YSoup]所创，转载请带上原文链接，感谢
https://blog.csdn.net/Deep_rooted/article/details/125455347

边栏推荐

猜你喜欢

随机推荐