ionic：实现滑动的三种方式

转载请注明出处处：
http://blog.csdn.net/lishihong108/article/details/52229794

#1 前言
　　在移动端受屏幕大小所限，展示内容很多的时候，就要使部分区域进行滑动。本文展示项目中所有到的几种方式，大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理，有两个容器A、B,假如A在外层，B在内层；外层的A宽度或高度固定，内层容器B宽度或者高度大于A即可实现滚动。
#2 实现方式
##1. ion-scroll
利用ionic自带的滑动指令

<ion-view view-title="Dashboard">
	<ion-content class="padding" has-bouncing="false">
		<ion-scroll has-bouncing="false" style="width:100px;border:solid 1px red;" direction="x">
			<div style="width:200px;">
			    ion-scroll实现滑动，用ionic自带的滑动组件实现滑动，ion-scroll其他属性可参考官网文档
		    </div>
		</ion-scroll>
	</ion-content>
</ion-view>

##2. css的overflow

<ion-view view-title="Dashboard">
	<ion-content class="padding" has-bouncing="false"  overflow-scroll="true">
		<div style="width:160px;height:300px;border:solid 1px red;overflow: auto;padding:20px;">
	        <div style="width:400px;height:500px;border:solid 1px blueviolet">
	            使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
	            使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
	            使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
	        </div>
       </div>
	</ion-content>
</ion-view>

• overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  注：使用这种方式，ion-content需要添加overflow-scroll="true"指令，表示使用系统自己的滚动来代替ionic的scroll，ionic是实现了自己的一套滚动方式的。

##3. 监听touch事件

<div style="width:100%;border:solid 1px;height:60px;overflow: hidden;white-space:nowrap;padding:10px 20px;" id="dash_scroll_container">
	<div ng-repeat="d in datas" style="margin-right:20px;border:solid 1px #FFC900;height:100%;width:100px;display:inline-block;text-align:center;line-height:40px;">
	    {{d}}
   	</div>
</div>

对应的js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {
	$scope.datas=[1,2,3,4,5,6,7,8,9,10];
	var startX=0,startY=0;
	var $domScroll=$("#dash_scroll_container");
	$domScroll.on("touchstart",function(e){
		startX=e.originalEvent.changedTouches[0].pageX;
		startY=e.originalEvent.changedTouches[0].pageY;
		console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
	});
	$domScroll.on("touchmove",function(e){
		var x = e.originalEvent.changedTouches[0].pageX-startX;
		var y = e.originalEvent.changedTouches[0].pageY-startY;
		if ( Math.abs(x) > Math.abs(y)) {//左右滑动  
		  scrollLeft($(this),x);   
		}else if( Math.abs(y) > Math.abs(x)){//上下滑动
			scrollTop($(this),y);   
		}
		function scrollLeft(obj,x){ 
			var currentScroll = obj.scrollLeft();
			console.log(parseInt(currentScroll)-x);
			obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
			e.preventDefault();  
      		e.stopPropagation();
		}
		function scrollTop(obj,y){ 
			var currentScroll = obj.scrollTop();
			console.log(parseInt(currentScroll)-y);
			obj.scrollTop(parseInt(currentScroll)-y);//滑动的距离
			e.preventDefault();  
      		e.stopPropagation();
		}
	});
})

通过监听手指的touchstart、touchmove事件，获得滑动的距离，调用外部容器div的滚动条滚动到对应距离。

• $(selector).scrollLeft(position)：设置元素的水平滚动位置
• $(selector).scrollTop(position)：设置元素的垂直滚动位置

最后，再使用angularjs的指令，讲滚动的监听封装为一个指令，方便以后滑动时候使用。

在directive.js中添加：

angular.module('starter.directives', [])
.directive('myScroll',function(){
	function link($scope, element, attrs) { 
		var $domScroll=$(element[0]);
		var startX=0,startY=0;
		$domScroll.on("touchstart",function(e){
			startX=e.originalEvent.changedTouches[0].pageX;
			startY=e.originalEvent.changedTouches[0].pageY;
			console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
		});
		$domScroll.on("touchmove",function(e){
			var x = e.originalEvent.changedTouches[0].pageX-startX;
			var y = e.originalEvent.changedTouches[0].pageY-startY;
			if ( Math.abs(x) > Math.abs(y)) {//左右滑动  
			  scrollLeft($(this),x);   
			}else if( Math.abs(y) > Math.abs(x)){ //上下滑动
				scrollTop($(this),y);   
			}
			function scrollLeft(obj,x){ 
				var currentScroll = obj.scrollLeft();
				console.log(parseInt(currentScroll)-x);
				obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
				e.preventDefault();  
	      		e.stopPropagation();
			}
			function scrollTop(obj,y){ 
				var currentScroll = obj.scrollTop();
				console.log(parseInt(currentScroll)-y);
				obj.scrollTop(parseInt(currentScroll)-y);//滑动的距离
				e.preventDefault();  
	      		e.stopPropagation();
			}
		});
	} 
	return {
		restrict: 'A',
		link: link 
	};
});

这样封装后使用起来就方便了，在需要滑动的元素上加上指令 my-scroll。

<div my-scroll style="border:slateblue solid 1px;width:100%;height:300px;overflow: hidden;margin:0;padding:0;" class="row">
	<div class="col-20"> 
		<div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #007AFF;height:80px;text-align:center;line-height:80px;">
		    地区{{d}}
	    </div>
    </div>
    <div class="col-80">
    	<div style="width:200%;border:solid 1px #009689;overflow: hidden;white-space: nowrap;">
		    <div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #FFC900;height:80px;text-align:center;line-height:80px;">
			    {{d}}每行
		    </div>
		 </div>
    </div>
</div>