小程序頁面中自帶頁面滾動監(jiān)測函數(shù) onPageScroll(e) 事件
需要的API:wx.getSystemInfoSync()。
data:{
scrollTop:0
},
//監(jiān)聽屏幕滾動判斷上下滾動
onPageScroll: function (ev) {
var_this = this;
//當(dāng)滾動的top值最大或最小時歉井,為什么要做這一步是因為在手機(jī)實測小程序的時候會發(fā)生滾動條回彈谒出,所以為了處理回彈涮毫,設(shè)置默認(rèn)最大最小值
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;
//當(dāng)滾動的top值最大或最小時,為什么要做這一步是因為在手機(jī)實測小程序的時候會發(fā)生滾動條回彈,所以為了處理回彈朗恳,設(shè)置默認(rèn)最大最小值
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)
}