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

      

  • 相关阅读:
    高效的多维空间点索引算法 — Geohash 和 Google S2
    Geohash距离估算
    位图(BitMap)索引
    深入浅出空间索引:为什么需要空间索引
    harbor rest api 转graphql api
    ringojs java jar 集成使用
    ringojs 使用rp 包管理web 应用依赖
    ringojs 的包管理
    ringojs 基于jvm 的javascript 平台试用
    graphql cli 开发graphql api flow
  • 原文地址:https://www.cnblogs.com/hzwl-2015/p/6475622.html
Copyright © 2011-2022 走看看