1. 首頁 > 生活百科 >

小程序怎么設置頁面滑動

生活百科


小程序怎么設置頁面滑動

文章插圖

設置小程序頁面滑動的案例：
1、需要借助小程序的事件：onPageScroll事件 。
2、需要借助的API：wx.getSystemInfoSync() 。
java代碼：
data:{
scrollTop:0
},
//監聽屏幕滾動判斷上下滾動
onPageScroll:function(ev){
var_this=this;
//當滾動的top值最大或最小時，為什么要做這一步是因為在手機實測小程序的時候會發生滾動條回彈，所以為了處理回彈，設置默認最大最小值
if(ev.scrollTopwx.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){
varself=this;
//當滾動的top值最大或最小時，為什么要做這一步是因為在手機實測小程序的時候會發生滾動條回彈，所以為了處理回彈，設置默認最大最小值
if(ev.scrollTopwx.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=https://www.mzbkw.com/baike/'home_black_03.png'
}elseif(ev.scrollTop>10){
self.fixBottomBg1=true;
console.log('222');
}else{
self.imgSrc=https://www.mzbkw.com/baike/'home_03.png';
self.fixBottomBg2=false;
self.fixBottomBg1=false;
}
self.$apply();
//給scrollTop重新賦值
//setTimeout(function(){
//_this.setData({
//scrollTop:ev.scrollTop
//})
//},0)
}

【小程序怎么設置頁面滑動】

    推薦閱讀