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

最新推荐文章于 2024-04-24 17:12:07 发布

中平签

最新推荐文章于 2024-04-24 17:12:07 发布

阅读量2k

点赞数

分类专栏：点点寒鸦文章标签： html html5 css javascript

本文链接：https://blog.csdn.net/weixin_43392545/article/details/111355299

版权

点点寒鸦专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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

遇到问题，留作参考。

中平签

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
vant 下拉刷新上拉加载页面监听滚动

一个类似朋友圈的页面需要下拉刷新上拉加载，而且要在页面滚动时候隐藏所有弹出框如评论的输入框，点赞分享的操作按钮弹出框等；出现要么一上拉就触发刷新要么就是下拉和触底正常但无法监听滚动；总算弄好了最后。<html><style> html, body { height: 100%; } #app{ height: 100%; overflow-y: auto; //重点 }</style><body><div id
复制链接

扫一扫