zl程序教程

您现在的位置是:首页 >  工具

当前栏目

微信小程序 屏幕滚动监听

微信程序 监听 屏幕 滚动
2023-09-11 14:20:19 时间

一、监听屏幕滚动 判断上下滚动

onPageScroll: function (ev) {
    console.log(ev)
    let _this = this
    //当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹,所以为了解决回弹,设置默认最大最小值
    if (ev.scrollTop <= 0) {
      ev.scrollTop = 0
    } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
    }
    //判断浏览器滚动条上下滚动
    if (ev.scrollTop > _this.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
      console.log('向下滚动'+ev.scrollTop);
    } else {
      console.log('向上滚动'+ev.scrollTop);
    }
    //给scrollTop重新赋值
    setTimeout(function () {
      _this.scrollTop = ev.scrollTop
    }, 0)
  },

二、设置屏幕返回顶部

//设置屏幕滚动到顶部
wx.pageScrollTo({
  scrollTop: 0
})