处理微信小程序scroll-view未被占满时滚动的问题

最新推荐文章于 2024-03-25 16:09:43 发布

呆子小木心

最新推荐文章于 2024-03-25 16:09:43 发布

阅读量1.4k

点赞数 1

分类专栏： uniapp 小程序 html 文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/cc6_66/article/details/129990550

版权

小程序同时被 3 个专栏收录

16 篇文章 2 订阅

订阅专栏

html

5 篇文章 1 订阅

订阅专栏

uniapp

3 篇文章 0 订阅

订阅专栏

当微信小程序中scroll-view的首个子元素设置margin-top时，可能导致单行滚动。解决方案包括使用padding-top替代，插入固定高度的空白元素，或包裹子元素于一个容器内。这些方法可避免滚动异常并保持布局美观。

摘要由CSDN通过智能技术生成

微信小程序（原生/uniapp）使用了 scroll-view 组件的第一个子元素设置了 margin-top 时，即使 scroll-view 只有一行也可以滚动。

解决办法：

方案一：

去掉第一个元素的 margin-top，设置 scroll-view 组件的 padding-top 来替代。

这样做的话在滚动时scroll-view 顶部和最上面一个元素之间总是有一段空隙。

下面两个方案几乎没有负面影响。

方案二：

去掉第一个元素的 margin-top，在 scroll-view 组件和第一个子元素之间添加一个高度固定的空白元素。

方案三：

将 scroll-view 组件的所有直接子元素用一个容器包裹，并将容器的宽高都设置为 100%，定位属性与 scroll-view 保持一致。