需求:手指往上划隐藏按钮, 手指往下滑显示按钮
效果如下:
页面 pages/pageIntro/pageIntro
提交记录:
(January 31st, 2023 10:07am)
底部按钮显示隐藏
关键代码:
onPageScroll(ev){
if(ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight){
console.log('上上')
this.setData({
isSwipDown:false
})
}else {
console.log('下下')
this.setData({
isSwipDown:true
})
}
if(ev.scrollTop <= 0){
this.setData({
isSwipDown:true
})
}
setTimeout(() => {
this.setData({
scrollTop:ev.scrollTop
})
}, 0);
},
onPageScroll(ev){
if(ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight){
console.log('上上')
this.setData({
isSwipDown:false
})
}else {
console.log('下下')
this.setData({
isSwipDown:true
})
}
if(ev.scrollTop <= 0){
this.setData({
isSwipDown:true
})
}
setTimeout(() => {
this.setData({
scrollTop:ev.scrollTop
})
}, 0);
},
就是在滚动的时候,记录一个scrollTop变量,跟当前的滚动距离比较,判断出是向上滚还是向下滚。知道上下的区别,就可以根据这个区别设置底部按钮的隐藏和显示了
标签:log,isSwipDown,底部,按钮,scrollTop,ev,隐藏,setData From: https://www.cnblogs.com/tufei7/p/17455712.html