小程序 -- 返回顶部
xx.js Page({ data: { scrollTop: 0, floorstatus: false }, goTop: function(e){ this.setData({ scrollTop: 0 }) }, scroll: function(e) { if(e.detail.scrollTop > 500) { this.setData({ floorstatus: true }); } else { this.setData({ floorstatus: false }); } }, getMore: function() { ... } })
xx.wxml <scroll-view scroll-y="true" bindscroll="scroll" scroll-top="{{scrollTop}}" bindscrolltolower="getMore" style="position:absolute; top:0; left:0; right:0; bottom:0;"> ...页面的内容 </scroll-view> <view class="widget-goTop" bindtap="goTop" wx:if="{{ floorstatus }}"> <view class="gotop-wrap"> <view class="icon icon-top"></view> <view>顶部</view> </view> </view>
xx.wxss /* 返回顶部 */ .widget-goTop { position: fixed; bottom: 125px; right: 5px; background: rgba(0,0,0,0.48); border-radius: 50%; overflow: hidden; z-index: 500; } .widget-goTop .gotop-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; width: 50px; height: 50px; font-size: 12px; color: #fff; border-radius: 50%; background-color: rgba(0,0,0,0.8); -webkit-background-size: 50px auto; }
以上方案存在的问题:
-
加载更多:同样的请求可能被不定次数地重复运行,因为
bindscrolltolower
多次被触发,但每次其被触发的请求未完成,于是便又发起了仍是获取该页数据的请求,导致重复获取数据;
解决方法:这个问题可以通过在发起请求前确认当前无请求正在进行解决,比如加一个isLoading
,当请求发起时其为true
,请求成功后重置为false
,要发起请求前确保isLoading为false
,以此避免重复请求同一页数据。
问题:除了上述加载更多这个问题,用此方法实现返回顶部,经测试,数据较多页时,会出现数据显示慢,页面部分内容空白;页面可能卡住;不知道这些问题跟这个实现方案有没有关系,不采用此方案,是否有其他方案可实现“返回顶部”? (总感觉非要加一个scroll-view包裹来实现,似乎不是最好的方案)
方法二:
wx.pageScrollTo({ scrollTop: 0, duration: 300 });
// 获取滚动条当前位置
onPageScroll: function (e) {
if (e.scrollTop > 500) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
}