微信小程序踩坑之：scroll-view的上拉加载触发问题

最新推荐文章于 2025-04-15 11:30:13 发布

原创最新推荐文章于 2025-04-15 11:30:13 发布

· 1.7k 阅读

1 ·

版权

文章标签：

#微信小程序 #小程序 #css

微信小程序踩坑记录专栏收录该内容

1 篇文章

订阅专栏

在微信小程序中，当使用scroll-view并设置子元素margin时，可能会遇到内容高度不足仍触发上拉加载事件的问题。博主通过在scroll-view内添加一个view作为包裹层，并设置padding或使用flex布局，成功解决了这个问题。此方法既保留了间距效果，又避免了异常的上拉加载触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

之前写代码的时候，scroll-view标签内部的子标签，习惯写 margin 来保持上下两个盒子之间的间距，但是发现当scroll-view里面的内容高度，还没有它本身高的时候，还是能触发上拉加载事件，就很不明白。

解决方案

网上收到的答案是 margin 造成的，但是我又不想改成 padding ，所以我的答案是在scroll-view的里面再套一个子父级的view盒子，给个padding：1rpx；的样式，或者使用flex布局。就解决了这个问题。

<scroll-view >
	<view style="padding:1rpx;box-sizing: border-box;">
		<!-- 这里放list列表渲染的内容 -->
	</view>
	<!-- 或 -->
	<view style="display:flex;flex-direction:column;align-items: center;">
		<!-- 这里放list列表渲染的内容 -->
	</view>
</scroll-view>

tips：行内样式style，可以改成class。随自己喜欢。上拉加载事件我没加上。