小程序员 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>