為什么80%的碼農都做不了架構師？>>> ??

? ? 首先，頁面里有兩個<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/

轉載于:https://my.oschina.net/geomen/blog/75387

總結

以上是生活随笔為你收集整理的Jquery Mobile左右滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。