关于小程序页面滑动监测

小程序页面中自带页面滚动监测函数 onPageScroll(e) 事件
需要的API:wx.getSystemInfoSync()。

data:{
  scrollTop:0
},
//监听屏幕滚动判断上下滚动
onPageScroll: function (ev) {

  var_this = this;

  //当滚动的top值最大或最小时,为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹,所以为了处理回弹,设置默认最大最小值

  if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
  }

  //判断浏览器滚动条上下滚动

  if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {

    //向下滚动

  } else {

    //向上滚动

  }

  //给scrollTop重新赋值

  setTimeout(function () {

    _this.setData({

      scrollTop: ev.scrollTop

    })

  }, 0)

}
onPageScroll(ev) {

  var self = this;

  //当滚动的top值最大或最小时,为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹,所以为了处理回弹,设置默认最大最小值

  if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
  }

  //判断浏览器滚动条上下滚动

  //this.scrollTop||ev.scrollTop==wx.getSystemInfoSync().windowHeight

  if (ev.scrollTop > 100) {

    console.log(ev.scrollTop, '111');

    self.fixBottomBg2 = true;

    self.imgSrc = 'home_black_03.png'

  } else if (ev.scrollTop > 10) {

    self.fixBottomBg1 = true;

    console.log('222');

  } else {

    self.imgSrc = 'home_03.png';

    self.fixBottomBg2 = false;

    self.fixBottomBg1 = false;

  }

  self.$apply();

  //给scrollTop重新赋值
  setTimeout(function () {
    _this.setData({
      scrollTop: ev.scrollTop
    })
  }, 0)

}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容