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

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)
}

你可能感兴趣的:(小程序,onPageScroll,小程序)