微客导航 » 文章资讯 » 微信小程序之判断页面滚动方向的示例代码

微信小程序之判断页面滚动方向的示例代码

2023-09-08 13:35:05 302

微信小程序中如果判断页面滚动方向？

解决方案

1.用到微信小程序API

获取页面实际高度nodesRef.boundingClientRect([callback])

监听用户滑动页面事件onPageScroll。

2.获取页面实际高度

/*JS*/
//封装函数获取ID为box的元素实际高度
getScrollHeight:function(){
wx.createSelectorQuery().select('#box').boundingClientRect((rect)=>{
this.setData({
scrollHeight:rect.height
})
console.log(this.data.scrollHeight)
}).exec()
},
//假设数据请求
getDataList:function(){
wx.request({
url:'test.php',//仅为示例，并非真实的接口地址
success:function(res){
//如果该元素下面的数据是动态获取的，此方法在wx.request请求成功的回调函数中调用
this.getScrollHeight()
}
})
},

3.监听用户滑动页面事件

//监听用户滑动页面事件
onPageScroll:function(e){

if(e.scrollTop<=0){
//滚动到最顶部
e.scrollTop=0;
}elseif(e.scrollTop>this.data.scrollHeight){
//滚动到最底部
e.scrollTop=this.data.scrollHeight;
}
if(e.scrollTop>this.data.scrollTop||e.scrollTop>=this.data.scrollHeight){
//向下滚动
console.log('向下',this.data.scrollHeight)
}else{
//向上滚动
console.log('向上滚动',this.data.scrollHeight)
}
//给scrollTop重新赋值
this.setData({
scrollTop:e.scrollTop
})
},

PS:微信小程序滚动到某个位置改变效果


Someofthewords
200?'class1':'class2'}}"

//JS文件
//滚动监听
scroll:function(e){
this.setData({
scrollTop:e.detail.scrollTop
})
}

其中，variable为全局变量，class1、class2即为相应的css

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序之判断页面滚动方向的示例代码

热门推荐

随机推荐