                        課程
                    
                        /前端開發(fā)
                        
                            /WebApp
                        
                        /移動(dòng)端的WEB相冊(cè)

zepto.js 下單次swipeUp 事件，貌似連續(xù)觸發(fā)了多次

遠(yuǎn)人老師您好,

????我昨天晚上看完了您的代碼，想把代碼改造成滑動(dòng)組件，但是卻遇到了一個(gè)問題。請(qǐng)看以下代碼：

<!DOCTYPE?html>
<html>
?<head>
????<title>modification_05.2_demo</title>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
	<script?src="zepto.min.js"></script>
	<script?type="touch.js"></script><!--delet-->
	<link?href="animate.css"?rel="stylesheet"?type="text/css">
	<style>
	???	blockquote,?body,?button,?dd,?dl,?dt,?fieldset,?form,?h1,?h2,?h3,?h4,?h5,?h6,?hr,?input,?legend,?li,?ol,?p,?pre,?td,?textarea,?th,?ul,img{
			margin:?0;
			padding:?0;
		}
	???	body{
	???		background:#c8161e;
	???		overflow:hidden
	???	}
	???	ul{
	???		list-style:none
	???	}
	???.clearfix:after{
	???		display:?block;?content:?"\20";?height:?0;?clear:?both;?overflow:?hidden;?visibility:?hidden;
	???		}/*ie8ò?é?*/
	???.img-container?li?img{}
	???img{
	???		width:?100%
	???	}
	???.img-container?li?{
	???		overflow:hidden;
	???	}
	</style>
</head>
<body>
	<ul?class="img-container?clearfix"?id="container"></ul>

	<script>
	var?total?=?20;
	var?i?=?1;
	var?num?=?1;

	var?tmpl?='<li?data-id="'+i+'"?class="animated?bounceIn"><img?src="img/'+i+'.jpg"></li>';
	$('#container').html(tmpl);	
	
	$('#container').delegate('li','swipeUp',function(){
		$('#container').swipeUp(function(){
			if(num>total){
				num?=?total;
			}else{
				num++;
			}
			console.log('num:?'+num);
			var?tmpl_2?=?'<li?data-id="'+num+'"?class="animated?bounceIn"><img?src="img/'+num+'.jpg"></li>';
			$('#container').html(tmpl_2);
		})	
	});
	</script>
</body>
</html>

????直接把該代碼放進(jìn)源代碼的根目錄即可運(yùn)行。

????現(xiàn)在的問題是，當(dāng)我向上滑動(dòng)一次圖片，num應(yīng)該是直接 +1，但每次滑動(dòng)的實(shí)際變化卻是 +0、+1、+2、+3、+4...

????我在console下查看num是正常的+1，不過后一次會(huì)比前一次多觸發(fā)一次事件；

????所以我想麻煩老師您debug一下。