vant 下拉刷新上拉加载页面监听滚动_van-pull-refresh 滚动事件监听

作者：在线问答5 | 2024-08-21 00:10:13

踩

van-pull-refresh 滚动事件监听

一个类似朋友圈的页面需要下拉刷新上拉加载，而且要在页面滚动时候隐藏所有弹出框如评论的输入框，点赞分享的操作按钮弹出框等；出现要么一上拉就触发刷新要么就是下拉和触底正常但无法监听滚动；总算弄好了最后。

<html>
<style>
	html, body {
   		 height: 100%;
	}
	#app{
		height: 100%; overflow-y: auto;  //重点
	}
</style>
<body>
<div id="app">
	 <van-pull-refresh  v-model="refreshing" @refresh="onRefresh" >
	  	<van-list>
	  	</van-list>
	  </van-pull-refresh>
</div>
</body>
</html>	 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

样式：
refresh和list没有新增css，重点是 app的 height: 100%; overflow-y: auto;
PS：盒子有固定高度和可滚动时候才能监听到滚动，监听页面滚动也是监听的这个固定高度可滚动的盒子
js
进页面
document.getElementById(‘app’).addEventListener(‘scroll’, this.scroll)
出页面
document.getElementById(‘app’).removeEventListener(’ scroll’, this.scroll)

遇到问题，留作参考。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/1009001