亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

zepto.js 下單次swipeUp 事件,貌似連續觸發了多次

遠人老師您好,

????我昨天晚上看完了您的代碼,想把代碼改造成滑動組件,但是卻遇到了一個問題。請看以下代碼:

<!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>

????直接把該代碼放進源代碼的根目錄即可運行。

????現在的問題是,當我向上滑動一次圖片,num應該是直接 +1,但每次滑動的實際變化卻是 +0、+1、+2、+3、+4...

????我在console下查看num是正常的+1,不過后一次會比前一次多觸發一次事件;

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

正在回答

2 回答

Uncaught TypeError: $(...).swipeUp is not a function 怎么解決?

0 回復 有任何疑惑可以回復我~
#1

慕粉3349066

可能是$沖突了,用Zepto(...).swipeUp試試
2016-05-12 回復 有任何疑惑可以回復我~

您好,我想問一下為什么我的swipeUp和swipeDown在手機測試不成功??

0 回復 有任何疑惑可以回復我~
#1

tq2014

document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);加上這句就好了
2015-03-17 回復 有任何疑惑可以回復我~
#2

口弦。 回復 tq2014

加到哪里啊
2015-08-27 回復 有任何疑惑可以回復我~
#3

keybum 回復 tq2014

加這句后,頁面不能滾動了,是什么原因
2016-05-23 回復 有任何疑惑可以回復我~
查看1條回復

舉報

0/150
提交
取消
移動端的WEB相冊
  • 參與學習       47956    人
  • 解答問題       227    個

本課程通過一個移動端相冊案例,帶您一步步了解移動端框架

進入課程

zepto.js 下單次swipeUp 事件,貌似連續觸發了多次

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號