微信小程序：返回顶部功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yilovexing/article/details/81584693

微信小程序回到顶部的原理是，需要实时地获取滚动条的位置，回到最上层滚动条是 0

wxml 代码

<!-- 一键回到顶部 -->
<image class='top' catchtap='goTop' src='{{ icoSrc }}'></image>

js 代码

  /** 
   * 回到顶部功能
   */
  // 获取滚动条当前位置
  onPageScroll: function (e) {
    // console.log(e.scrollTop)
    if (e.scrollTop > 0) {
      this.setData({
        icoSrc: "/image/top.png",
      })
    }
    else {
      this.setData({
        icoSrc: "/image/null.png",
      });
    }
  },
  // 一键回到顶部
  goTop: function (e) {

    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    }
    else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },

上述 js 中有一个特别讨巧的显示图标的方法 icoSrc: "/image/null.png"

如果不加这条语句，用户随时随刻都能看到“回到顶部”的图标（或者是第一次不显示，滑到下面，然后再回到顶部，这个图标还是回存在，这是因为数据还是之前的数据，并那没有刷新替换），但是我希望是当用户往上滑的时候再显示，到了最顶层就不显示了

这条语句是意思是，当滚动条到了最顶层就使用一个透明背景色的图标来代替他，哈哈