关于小程序页面滑动监测

小程序页面中自带页面滚动监测函数 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)

}