首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点，就没有写出footer和header。定义的页面如下：
<body>
<!-- 第一个页面 -->
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" id="listview1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<!-- 第二个页面 -->
<div data-role="page" id="class-page">
<div data-role="content">
<ul data-role="listview" id="listview2">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</body>
接下来通过jquery mobile 中的swipe事件执行左右滑动效果：
<script>
$(function() {
$("#listview1").bind("swipeleft", function() {
$.mobile.changePage("#class-page");
});
$("#listview2").bind("swiperight", function() {
$.mobile.changePage("#index", {
transition : "slide",
reverse : true
}, true, true);
});
});
</script>
这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上
reverse:true,这样就可以实现左右切换了~
参考文章：http://my.oschina.net/geomen/blog/75387