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