小程序监听屏幕滚动 判断滚动方向上下滚动且滚动到一定位置

1.单独写

page({
	data:{
		scrollTop:0
	},
   //监听屏幕滚动 判断上下滚动 
   onPageScroll: function (ev) {
    var _this = this;
    //当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹。防止发生回弹,设置默认最大最小值   
    if (ev.scrollTop <= 0) {
      ev.scrollTop = 0;
    } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
    }
    //判断浏览器滚动条上下滚动   
    if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
        this.setData({
          istrue_scroll:true  //控制页面显示
        })   
    } else {
      this.setData({
        istrue_scroll:false   //控制页面隐藏
      }) 
      console.log('向上滚动');  
    }  
    //给scrollTop重新赋值    
    setTimeout(function () {
      _this.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
  },
})

2.写在util里成公共的类

var util = require('../../../utils/util.js');
page({
	data:{
		scrollTop:0
	},
	//监听屏幕滚动 判断上下滚动
   	onPageScroll: function (ev) {
    	var that=this;
    	var data_scrollTop=this.data.scrollTop;
    	util.scrollFloatwindow(ev,data_scrollTop,that);
  	},
  ))

util里

module.exports = {
	scrollFloatwindow:scrollFloatwindow
}
//滚动方向判断方法
function scrollFloatwindow(ev,data_scrollTop,that){
    if (ev.scrollTop <= 0) {
      ev.scrollTop = 0;
    } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
    }
    if (ev.scrollTop > data_scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
      that.setData({
          istrue_scroll:true
        })   
    } else {
      that.setData({
        istrue_scroll:false
      }) 
      console.log('向上滚动');  
    }     
    setTimeout(function () {
      that.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值