微信小程序 滾動顯示返回頂部

項目過程中，列表頁過長，產品需求加載兩屏以上才顯示返回頂部的按鈕，直接上代碼。

這個案例設定了兩個變量，一個是滾動條的高度，可能不止一個頁面會用到返回頂部，所以一個是全局的獲取屏幕的高度。內容部分自己定義，不贅述，本例是模擬效果。

test.wxml

<text>內容部分</text>
<view wx:if="{{scrollTop>minscreenHeight}}" class="goTop" bindtap="goTop">
   <text>返回\n頂部</text>  
</view>

test.wxss

page{ height:2000px; background: #fff;}
.goTop{width:68rpx;height:68rpx; position: fixed;bottom:30rpx; right:26rpx; z-index:4;border-radius: 50%; background: #ccc;color:#fff; font-size: 20rpx; display: flex; align-items: center;justify-content: center; }

app.js

data: {
    minscreenHeight:0,
},
 onLaunch: function () {
    this.getHeight(1)
},
  getHeight: function (n) {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.data.minscreenHeight = res.windowHeight * n
      }
    })
  },
  goTop: function () {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  },

test.js調用

const app = getApp()；
Page({
  data: {
    minscreenHeight: app.data.minscreenHeight,
    scrollTop: 0,
  },
  onPageScroll: function (e) { // 獲取滾動條當前位置
    this.setData({
      scrollTop: e.scrollTop
    })
  },
  goTop:function(){
    app.goTop()
  },

})