JQuery Mobile左右滑动效果

首先，页面里有两个<div data-role="page">，捡重点的写是，省掉其中的header和footer,这样：

 

01

//第一页面

02	<div data-role="page" id="index">

03	<div data-role="content">

04	<ul data-role="listview" id="circle-news-list">

05	<!-- 第一个列表 -->

06

</ul>

07

</div>

08

</div>

09

//第二页面

10	<div data-role="page" id="class-page">

11	<div data-role="content">

12	<ul data-role="listview" id="class-news-list">

13	<!-- 第二个列表 -->

14

</ul>

15

</div>

16

</div>

 

接下来通过jquery mobile 中的swipe事件还执行左右滑动效果：

 

 

view source

 

print?

01

<script>

02	$(function(){

03	$("#circle-news-list").bind("swipeleft",function(){

04	$.mobile.changePage("#class-page");

05

});

06	$("#class-news-list").bind("swiperight",function(){

07	$.mobile.changePage("#index", {transition:"slide",reverse:true}, true, true);

08

});

09

});

10

</script>

 

这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上

 

reverse:true,这样就可以实现左右切换了~

 

 来自：http://designicu.com/jquery-mobile-swipe/