小程序页面滑动

// 微信小程序如何判断页面上下滚动

// 1、需要借助小程序的事件：onPageScroll事件。

// 2、需要借助的API：wx.getSystemInfoSync()。

data :{

scrollTop: 0

},

//监听屏幕滚动 判断上下滚动

onPageScroll: function (ev) {

var _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.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 <= 0) {

ev.scrollTop = 0;

} else 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)

}