The little programmer's scroll conflicts with the page scrolling, causing the fast slide to the bottom to freeze and fail.

question

When the page uses scroll-view and too much content causes scrolling, if the height of the scrollview is not configured, the page scrolling function andscroll-viewConflicts will occur. There will be lag when sliding to the top or bottom. This is because the scroll is scrolling for a while, and the page is scrolling for a while.

The following source code:

<nav title="Demo"></nav>
<scroll-view style="margin-top:{
   
   {nav_height}}px;height:{
   
   {windowH}}px;"
             scroll-y scroll-with-animation bindscrolltolower="nextPage">
  <view class="mt40" id="s_top"></view>
  <product wx:for="{
   
   {list.data}}" ></productCard>
  <view  class="end">没有更多数据了~~</view>
</scroll-view>

Add bindscroll="scrollEvent", write onPageScroll and scrollEvent events in js, and you can use them to see and perform different scrolling.

 onPageScroll(){
    console.log(">>>pageScroll")
  },
  scrollEvent(options) {
    console.log(">>> scroll")
    if (options.detail.scrollTop >= (this.data.windowH - this.data.nav_height)) {
      this.setData({hiddenTopBtn: false})
    } else {
      this.setData({hiddenTopBtn: true, s_top: ""})
    }
  },

Solution:

Let scroll-view wrap all the content of the page

When you need to suspend the navigation bar, monitor the height of scroll-view from the top

<nav title="DEMO" hiddenBack="true"></nav>
<scroll-view style="height:{
   
   {windowH-nav_height}}px;margin-top:{
   
   {nav_height}}px;overflow: scroll;"
             scroll-y scroll-with-animation bindscrolltolower="nextPage" bindscroll="scrollEvent">
  <product wx:for="{
   
   {list.data}}" ></product>
  <view " class="end">没有更多数据了~~</view>

</scroll-view>