JQuery Mobile左右滑动效果

最新推荐文章于 2022-05-31 17:33:40 发布

liqueur

最新推荐文章于 2022-05-31 17:33:40 发布

阅读量189

点赞数

分类专栏： Html5&&JQM 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/liqueur/article/details/84468389

版权

Html5&&JQM 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

 
    01//第一页面
 
<div data-role="page" id="index"> 
 
<div data-role="content"> 
 
     <ul data-role="listview" id="circle-news-list"> 
 
    <!-- 第一个列表 --> 
 
     </ul>            
 
</div> 
 
</div> 
 
    09//第二页面
 
<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事件还执行左右滑动效果：

 
    01<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); 
 
    }); 
 
    09});
 
    10</script>