Question

我尝试在我的列表中使用两种平底锅：

- 列表包装器上的一个垂直平移，用于初始化拉动刷新操作

- 每行列表中的一个水平平移，用于显示删除/编辑操作

我使用了Hammer.js的requireFailure方法，但没有同时触发2个平底锅。

平底锅事件正常工作，但在2行水平平移后，我的垂直平移停止工作..

这是我的问题片段：

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
	<script type="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<style>
	ul {
		list-style: none;

	}
	li {
		height: 50px;
		background: #F2F6F8;
		margin-bottom: 15px;
		display: flex;
		align-items : center;
	}
</style>
<body>
 	<ul id='listing'>
 		<li class="row-listing">
 			Test Test 			
 		</li>
  		<li class="row-listing">
 			Test Test 			
 		</li>
  		<li class="row-listing">
 			Test Test 			
 		</li>
 		<li class="row-listing">
 			Test Test 			
 		</li>
 	 	<li class="row-listing">
 			Test Test 			
 		</li>
 		<li class="row-listing">
 			Test Test 			
 		</li>
 	</ul>
</body>
<script type="text/javascript">
	
	this.hammer = new Hammer.Manager(document.getElementById("listing"));
				
	var panMax =  100;
	var pos;
	
	//add pan event
	this.panV = new Hammer.Pan({threshold: 10, direction : 24});
	
	this.hammer.add(this.panV);

	
	
	this.hammer.on('pandown panup', function(e){
		
		if($('#listing').scrollTop() <= 5 ) {
			
				var percent = (100 / 60) * e.deltaY;
					pos		= ( 60 / 100) * 100 + percent -50;
					pos		= Math.min(panMax, pos);

			$('#listing').css('transform','translate3d(0, ' + (pos < 0  ? 0 : pos ) + 'px, 0)');
			
		}
		
	});

	this.hammer.on('panend', function(e){
		$('#listing').css('transform','translate3d(0, 0px, 0)');

	})



	var _this = this;
	console.log(_this);
	$('.row-listing').each(function(){
					
		var rowsListingHammer	= new Hammer.Manager(this);
		var panH				=  new Hammer.Pan({threshold: 10, direction : 6});
		
		rowsListingHammer.add(panH);
			
		var pos;
		var panMin			= -200;
		var panMax			= 15;
		var row				= this;
		var $swipeWrapper	= $(row).find('.swipeActions'); //wrapper wich contains actions
		var $el				= $(row);//row to translate
		
		rowsListingHammer.on('panleft panright', function(e) {
			
			var percent = (100 / 60) * e.deltaX;
			pos			= ( 60 / 100) * 100 + percent;
			pos			= Math.max(pos,panMin);
			
			if(pos > 0) {
				pos = 0;
			}
			
			$el.css('transform','translate3d(' + pos + 'px,  0, 0)');
			$swipeWrapper.css('transform','translate3d(' + pos + 'px,  0, 0)');
			
		});
		
				
		rowsListingHammer.on('panend', function(e){
			$el.css('transform','translate3d(0,  0, 0)');		
		});

		_this.hammer.get('pan').requireFailure(panH);

	});

				
</script>
</html>

＆＃13;

谢谢你的帮助。

用Hammer.js嵌套Pan

0 个答案: