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

程序回到顶部的原理和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
      })
    }
  }
})

最后效果：

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

欢迎访问个人博客：guanchao.site

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”