zoukankan      html  css  js  c++  java
  • PC端和移动端滚动加载的相关问题(Angular下)

    app.directive('scrollLoading',['$location',function($location){
      		return {
      			restrict:'AE',
      			link:function(scope,ele,attrs){
      				var pageWindow = $(this);
      				// pageWindow.on('scroll',function(){
      				// 	if($location.$$path.indexOf('logcenter')>-1){
      				// 		if(pageWindow.scrollTop() <=0){
      				// 			console.log(pageWindow.scrollTop());
      				// 			scope.loadMore(0);
      				// 		}
      				// 	}
      				// });
    
    				//针对PC端的滚动加载数据的方法
      				pageWindow.on('DOMMouseScroll mousewheel',function(event){
      					if($location.$$path.indexOf('logcenter')>-1 && scope.enableMouseWheel){
    	  					var e = event || window.event;
    	  					var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
    	                				(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));// firefox
    	  					if(delta > 0 && pageWindow.scrollTop() <=0){//向上滚动加载之前的数据
    	  						scope.$apply(function(){
    						        scope.loadMore(0);
    						    });
    	  					}else if(delta<0 && $(window).height() + $(window).scrollTop() - $(document).height() >= 0){//向下滚动加载之后的数据
    	  						scope.$apply(function(){
    						        scope.loadMore(1);
    						    });
    	  					}
    	  					// // for IE
    					   //  event.returnValue = false;
    					   //  // for Chrome and Firefox
    					   //  if(event.preventDefault) {
    					   //      event.preventDefault();	
    					   //  }
    	  				}
      				})
    
      				//针对移动端的滚动加载数据的方法
      				pageWindow.on('touchstart',function(se){
      					if($location.$$path.indexOf('logcenter')>-1 && scope.enableMouseWheel){
    	  					var seX = se.originalEvent.targetTouches[0].pageX;
    	  					var seY = se.originalEvent.targetTouches[0].pageY;
    	  					return pageWindow.off('touchmove').on('touchmove',function(me){
    	  						var meX = me.originalEvent.targetTouches[0].pageX;
    	  						var meY = me.originalEvent.targetTouches[0].pageY;
    	  						var disY = meY - seY;
    	  						var disX = meX - seX;
    	  						return pageWindow.off('touchend').on('touchend',function(ee){
    	  							if(disY>0 && pageWindow.scrollTop() <=0){//向上滚动加载之前的数据
    	  								scope.$apply(function(){
    							        	scope.loadMore(0);
    							    	});
    		  						}else if (disY<0 && $(window).scrollTop() + $(window).height() - $(document).height() >= 0){//向下滚动加载之后的数据
    		  							scope.$apply(function(){
    							        	scope.loadMore(1);
    							    	});
    		  						}
    	  						})
    	  					})
    	  				}
      				})
      			}
      		};
      }])
    

      

  • 相关阅读:
    SpringBoot------异步任务的使用
    SpringBoot------定时任务
    MySQL中文编码设置为utf-8
    MySQL 中文未正常显示
    使用postman测试接口时需要先登录怎么办
    python 查询数据库返回的数据类型
    数据库和数据仓库的关系
    distinct 用法
    Hbase学习
    顺序访问数据和随机访问数据
  • 原文地址:https://www.cnblogs.com/hzwl-2015/p/6475622.html
Copyright © 2011-2022 走看看