Jquery Mobile左右滑动效果

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

//第一页面
<div data-role="page" id="index">
<div data-role="content">
     <ul data-role="listview" id="circle-news-list">
    <!-- 第一个列表 -->
     </ul>            
</div>
</div>
//第二页面
<div data-role="page" id="class-page">
<div data-role="content">
     <ul data-role="listview" id="class-news-list">
    <!-- 第二个列表 -->
     </ul>            
</div>
</div>

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

<script>
$(function(){
    $("#circle-news-list").bind("swipeleft",function(){
        $.mobile.changePage("#class-page");
    });
    $("#class-news-list").bind("swiperight",function(){
        $.mobile.changePage("#index", {transition:"slide",reverse:true}, true, true);
    });
});
</script>

 

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

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

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