首先，页面里有两个<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事件还执行左右滑动效果：
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/