Using scroll-view in mini program
<scroll-view style="width: 100%;height: {
{windowHeight}}px;background-color:#ececec;"
id="scroll-view"
scroll-y="true"
bindscroll="scroll">
</scroll-view>
The scroll method in bindscroll="scroll" can detect the scrolling distance
scroll(e) {
console.log('滚动距离：'+e.dateil.scrollTop)
}
But in the process of scrolling in quick reading, it has clearly scrolled to the top, but scrollTop is still at 300.
Although there is no problem with slow sliding, scrollTop will have a very large error when scrolling quickly.
The following is the solution
1. This is because each scroll listening event will be called, which consumes resources. The system will throttle by default. You can add one in scroll-view. throttle="{
{false}}” Turn off throttling
<scroll-view
style="width: 100%;height: {
{windowHeight}}px;background-color:#ececec;"
id="scroll-view"
throttle="{
{false}}"
scroll-y="true"
bindscroll="scroll">
</scroll-view>
2. Reduce the operations in the scroll method because the monitoring event maybe called hundreds of times if you just slide it in the scroll-view. If you write this.setData in the method, the operation applet may get stuck and cannot slide. It is recommended to perform the operation after scrollTop reaches a certain value. For example, scrollTop=0 first determines when to slide to the top or bottom, and then controls other views. Show hidden.