方法:用户下滑时切换背景色,然后当用户往上滑回去时判断当前滑动点与顶部距离(比如说定5),在距离以内就切换回原来的背景色 。
注意:IOS自带回弹效果,要固定的顶部栏及时切换背景色,只需要判断scrollTop的值。
// 滚动事件,用来切换顶部背景色
onScroll(event) {
const {
scrollTop
} = event.detail;
if (app.globalData.isApple) {
// 苹果系统:自带滑动回弹效果,scrollTop会有负数,只要scrollTop快接近顶部就行
this.setData({
prevScrollTop: scrollTop,
isScrollToTop: (scrollTop < 5) ? true : false
});
} else {
// 安卓系统,“往上”滚动到100以内,自动滚动都顶部
if (scrollTop < this.data.prevScrollTop && scrollTop < 60) {
wx.pageScrollTo({
scrollTop: 0
});
}
this.setData({
prevScrollTop: scrollTop,
isScrollToTop: (scrollTop < this.data.prevScrollTop && scrollTop < 20) ? true : false
});
}
}