小程序如何设置页面滑动

小程序如何设置页面滑动

设置小程序页面滑动的案例：

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='home_black_03.png'
}elseif(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)
}

本文来源：https://www.yuntue.com/post/80084.html | 云服务器网，转载请注明出处！