小程序 -- 返回頂部

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

　　　　　　});

　　　　}

　　}