vant 下拉刷新上拉加载页面监听滚动

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

<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>	 

样式:
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)

遇到问题,留作参考。

猜你喜欢

转载自blog.csdn.net/weixin_43392545/article/details/111355299