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

说明:因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);
  
}

你可能感兴趣的:(onPageScroll,前端)