小程序员 scroll滚动与页面滚动冲突造成快速滑到底部卡顿失败问题

问题

当页面使用scroll-view, 内容过多产生滚动时， 如果scrollview 的高度未配置ok,页面滚动功能和scroll-view会产生冲突，滑动到最头或者最底会有卡顿现象，是因为一会scroll滚动，一会是页面滚动，

如下源码：

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

加上bindscroll="scrollEvent"， js写上onPageScroll， scrollEvent事件，可以用看到，执行不同的滚动。

 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: ""})
    }
  },

解决办法：

让scroll-view包裹页面所有内容

当需要悬浮导航栏的时候 监听scroll-view的距离顶部的高度

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