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

scroll-view 组件的第一个直接子元素设置了 margin-top 时即使 scroll-view 只有一行也可以滚动。

解决办法:

方案一:

去掉第一个元素的 margin-top,这样的缺点是第一个元素和 scroll-view 顶部紧贴,看着很不舒服。

方案二:

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

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

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

方案三:

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

方案四:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,933评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 4,846评论 0 7
  • 0、杂记 0.1、在实际的开发中,图片资源不会存储在小程序的目录中,因为小程序的大小不能超过1MB(现在改为2M)...
    it筱竹阅读 5,498评论 0 10
  • 一个人 下了班 不想回家 深秋微冷 身上单薄 不知该去哪里 一步两步 走到哪儿都显得多余 突然间 对生活失去了信念...
    停停不能停阅读 303评论 0 1