小程序（十五）小程序回到顶部

程序回到顶部的原理和web网站的原理是一样的，都是通过滚动条的位置来判断。

关于web网站的回到顶部设置，请移步《JavaScript实现网页带动画返回顶部》

废话不多说，直接上代码：

Index.wxml

<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />

这个就一行代码，放哪都行。

Index.wxss

.go_top{
  position: fixed;
  bottom: 70px;
  right: 12px;
  width: 40px;
  height: 40px;
}

Index.js

Page({
  data: {
    scrollHeight: wx.getSystemInfoSync().windowHeight,
    // 是否显示回到顶部图标
    visual: false,
  },

/**
   * 点击回到顶部图片方法
   */
  scrollToTop() {
    if (wx.pageScrollTo) {//判断这个方法是否可用
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },
  /**
   * 实时监听滚动条位置,显示/不显示回到顶部图片
   */
  onPageScroll:function(e) {
    let scrollTop = e.scrollTop
    if (scrollTop < this.data.scrollHeight / 2) {
      this.setData({
        visual: false
      })
    } else {
      this.setData({
        visual: true
      })
    }
  }
})

最后效果：

ce6612a333bb0a0bf6ba186b68608a68.png

有好的建议，请在下方输入你的评论。

原文链接：https://guanchao.site/index/article/articledetail.html?artid=rozvoJL1N