微信小程序 滑動到頂部

效果：

點擊上圖中右下角的圖標滑動到頂部。

其實很簡單，但也有一些小細節。

1.確定圖標按鈕的位置

使用絕對位置使其固定在右下角的位置。

wxml:

<icon type="download" size="45" color="#4caf50" bindtap='scrollTop'/>

這裏使用官方的下載圖標，然後修改了一下顏色。

wxss:

icon[type=download] {
   position: fixed;
   bottom: 30px;
   right: 20px;
   transform: rotate(180deg);
}

• 爲了使其不跟隨滑動，修改了position爲fixed。
• 原本箭頭是向下的，使用transform: rotate(180deg)旋轉180度向上。

2.綁定事件

bindtap='scrollTop'

   scrollTop: function() {
      wx.pageScrollTo({
         scrollTop: 0,
         duration: 300
      })
   },

在事件中，我們使用了官方的API wx.pageScrollTo，兩個參數，一個是滑動的位置，一個是執行時長。

到此，滑動到頂部的功能就簡單實現了。

3.進階

爲什麼會有這一步呢，是因爲發現無論滑動的距離是遠還是近，執行時長都是300，那能不能優化呢，其實是可以的。

微信page中有一個onPageScroll方法（與onLoad平級），監聽用戶滑動頁面事件。
那我們就可以根據滑動的距離動態設置執行時長了。

把時長定義爲變量

data: {
      scrollDuration: 500,
   },

在監聽事件中賦值

   onPageScroll: function(e) {
      console.log(e.scrollTop)
      this.setData({
         scrollDuration: e.scrollTop / 2
      });
   }

• e.scrollTop即爲頁面滑動距離
• e.scrollTop / 2爲執行時長，也可以設置其他值
• 官方提示：請避免在 onPageScroll 中過於頻繁的執行 setData 等引起邏輯層-渲染層通信的操作。

修改滑動方法

   scrollTop: function() {
      wx.pageScrollTo({
         scrollTop: 0,
         duration: this.data.scrollDuration
      })
   },

ok，到此就全部完成了。