A page similar to the circle of friends needs to be pulled down to refresh and up to load, and all pop-up boxes such as the input box for comments, the pop-up box for the operation button of liking and sharing, etc. should be hidden when the page is scrolling; when it appears, it will trigger a refresh when it is pulled up or it will be pulled down and bottomed out fine but couldn't listen to the scrolling; finally got it right.
<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>
Style:
Refresh and list do not add css, the focus is on the height of the app: 100%; overflow-y: auto;
PS: The scrolling can only be monitored when the box has a fixed height and can be scrolled, and the scrolling of the monitoring page is also monitored. This fixed height can be monitored The scrolling box
js
enters the page
document.getElementById('app').addEventListener('scroll', this.scroll)
exits the page
document.getElementById('app').removeEventListener(' scroll', this.scroll)
If you encounter a problem, keep it as a reference.