小程序onPageScroll上滑显示，下滑隐藏

最新推荐文章于 2024-10-14 12:04:53 发布

Zan^Z

最新推荐文章于 2024-10-14 12:04:53 发布

阅读量2.5k

点赞数 1

分类专栏： onPageScroll 前端文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Zan_Z/article/details/106837587

版权

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

onPageScroll

4 篇文章

订阅专栏

本文介绍了如何在小程序中优化onPageScroll事件，通过添加定时器和清除原有处理，实现上滑显示内容，下滑隐藏内容的功能，以减少执行频率并提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：因onPageScroll执行过于频繁，为了减少运行，在条件不满足时onPageScroll不执行方法。且每次运行会清除原来的

1.简化前

//util.js公共方法（怎么调用我就不写啦）
function scrollFloatwindow(e,that){
  if (e.scrollTop <= 0) {
    e.scrollTop = 0;     //最顶部
  } else if (e.scrollTop > that.data.scrollHeight) {
    e.scrollTop = that.data.scrollHeight;    //最底部
  }else if(e.scrollTop > that.data.scrollTop || e.scrollTop >= that.data.scrollHeight,){
     that.setData({
	   istrue_scroll:true;
	 })
  }else{
     that.setData({
		istrue_scroll:false;
	 })
  }
  that.setData({
	scrollTop:e.scrollTop
  })
  //that.data.scrollTop:e.scrollTop
}


//使用这个方法的page.js页面(记得要引用util页面哦)
  //监听屏幕滚动 判断上下滚动 (组件悬浮窗使用) 
  onPageScroll: function (ev) {
    if(this.data.isusescroll=="no_normal"){
      var that=this;
      wx.createSelectorQuery().select('#box').boundingClientRect((rect) => {
        this.setData({
          scrollHeight: rect.height
        })
      }).exec()
      util.scrollFloatwindow(ev,that);
    }else{
      return;
    }   
  }
 
 //wxml
 <view id="box">
   //内容
 </view>

2.util.js里scrollFloatwindow方法简化后（完整【ps：加了个定时器以及清除】）

// util.js公共方法

let scrollFloatwindow_id=null;
//悬浮窗滚动方法判断方法
function scrollFloatwindow(e,that){
  if (e.scrollTop <= 0) {
    //最顶部
    e.scrollTop = 0;
  } else if (e.scrollTop > that.data.scrollHeight) {
    //最底部
    e.scrollTop = that.data.scrollHeight;
  }
 if(scrollFloatwindow_id) clearTimeout(scrollFloatwindow_id);
  //给scrollTop重新赋值 
  scrollFloatwindow_id=setTimeout(() => {
    that.setData({
      istrue_scroll:e.scrollTop > that.data.scrollTop || e.scrollTop >= that.data.scrollHeight,
      scrollTop:e.scrollTop
    });
  }, 50);
  
}