jqeury mobile swiperight swiperight 左右滑动使用方法和遇到的问题

今天在使用jqeury mobile swiperight swiperight 左右滑动切换page页面时出现了问题,反应慢和被浏览器当成前进后退

后来百度无果,换了bing.com才找到解决方案



jQuery Mobile Swipe

swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发:

实例

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

亲自试一试

jQuery Mobile Swipeleft

swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发:

实例

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

亲自试一试

jQuery Mobile Swiperight

swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发:

实例

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

亲自试一试


 jquery mobile 的所有事件都应该用在

$(document).ready(function(){
事件代码应该放在这里
});

左右滑动反应慢的问题问题是因为默认30PX才触发,所以改小点就可以了,使用下面代码修改

$.event.special.swipe.horizontalDistanceThreshold = 5;


当你在手机浏览器,比如QQ浏览器上使用时,你会发现左右切换变成了浏览器中的前进后退,可以使用代码来禁止他


		$(this).on("swiperight",function(e){
			
			e.stopImmediatePropagation();
			//return false;
		});


我完整的代码,如下面的


//如果不懂请加群,在我博客其他文章中有群号
$(document).ready(function(){

	//我在一个页面中包含了5个page
	$page_list_object = $('.page');

	//要切换页面的link
	$index_page_link_list = ['./index.html#session',
							 './index.html#friends',
							 './index.html#groups',
							 './index.html#space',
							 './index.html#config'];
	//修改触发像素大小
	$.event.special.swipe.horizontalDistanceThreshold = 5;
	//给页面中的5个page都加上左右滑动事件
	$.each($page_list_object,function($index,$item){
		$(this).on("swipeleft",function(e){
			$current_index = $index <4 ? $index+1 : 4;
			$.mobile.changePage($index_page_link_list[$current_index]);
			 e.stopImmediatePropagation();
			//return false;

		});
		$(this).on("swiperight",function(e){
			$current_index = $index >0? $index-1 : 0;
			$.mobile.changePage($index_page_link_list[$current_index]);
			e.stopImmediatePropagation();
			//return false;
		});
	});

});



你可能感兴趣的:(jquery,mobile)