小程序列表页实现回到顶部按钮

预览

scrolltop.gif

思路

1.通过控制scroll-view的scroll-top属性值，设定它为0，就能回到顶部。
2.通过bindscroll监测事件的event属性，得到当前的scrollTop值，判断是不是超过半屏，是则显示回到顶部的按钮。
注意，对于竖直方向的滚动，需要设定height css属性，以及scroll-y为真

核心代码

js代码

Page({
  data: {
    scrollHeight: wx.getSystemInfoSync().windowHeight,
    visual: false
  },
  scrollToTop() {
    this.setData({
      scrollTop: 0
    })
  },
  scrolling(e) {
    let scrollTop = e.detail.scrollTop
    if (scrollTop < this.data.scrollHeight / 2) {
      this.setData({
        visual: false
      })
    } else {
      this.setData({
        visual: true
      })
    }
  }
})

布局文件

在线查看

Mina组件库

源码下载

关注订阅号【黄秀杰】或扫一扫下方二维码，回复关键字115

mp