微信小程序scroll-view的触发机制

最新推荐文章于 2025-03-14 15:23:36 发布

jingcairensheng

最新推荐文章于 2025-03-14 15:23:36 发布

阅读量780

点赞数

文章标签： javascript 微信小程序

本文链接：https://blog.youkuaiyun.com/jingcairensheng/article/details/132507940

版权

本文介绍了微信小程序中的scroll-view组件如何实现上拉加载和下拉刷新功能，包括设置固定高度、使用scroll-view的事件属性以及处理分页。同时提到了如何通过WXSS设置高度和使用uni.createSelectorQuery进行动态获取。

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

一、scroll-view
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

两个属性是作为上拉加载下拉刷新触发事件
scroll-view属性bindrefresherrefresh：自定义下拉刷新被触发

scroll-view属性bindscrolltolower：滚动到底部/右边时触发

二、设置高度

.scroll-v 是scroll-view 所在的类名，tabHeight为scroll-view的高度

		async getHeight(){
			const query=uni.createSelectorQuery();
			await new Promise(resolve=>{
				query.select('.scroll-v').boundingClientRect();
				query.exec(res=>{
				    this.tabHeight=res[0].height+'px';
					resolve();
				});
			})
		}

三、分页触发

scroll-view 内包含的子元素，当子元素高度超出tabHeight，触发分页事件并重新计算高度。

四、更详细的也可以参考下面文章

微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）_scroll-view上拉加载_Qianmo_er的博客-优快云博客