• 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);
    							    	});
    		  						}
    	  						})
    	  					})
    	  				}
      				})
      			}
      		};
      }])
    

      

  • 相关阅读:
    Day 03--设计与完善(一)
    Day 02--选题与设计(二)
    Day 01--选题与设计(一)
    课程设计第六天,08.24
    课程设计第五天,08.23
    课程设计第四天,08.22
    课程设计第三天,08.21
    软件课程设计第二天,08.20
    软件课程设计第一天
    旋转正方形
  • 原文地址:https://www.cnblogs.com/hzwl-2015/p/6475622.html
Copyright © 2020-2023  润新知