如何在jQueryMobile中进行实时转换

Question

我想在jQueryMobile中进行实时转换，当我向左或向右滑动时，它会显示一个新页面。

我有经理在点击时使用：$.mobile.changePage

我在一个html页面中有不同的页面，比如：

<div data-role="page" id="p2">
<div data-role="header">
     <h1>Header 2</h1>
</div>
<div data-role="content">Page Two</div>
<div data-role="footer">
     <h4>Footer</h4>
</div>

我只想通过向左或向右滑动在这些页面之间切换。

这是添加到填充页面的代码：

  $(document).ready(function() {
    $.getJSON('http://prod.footballclub.orange.com/ofc/news?offset=0&limit=10', function(jd) {
          
     
           
        $.each(jd, function(idx, obj) {
       
        $("body").append('<div data-role="page" id="p'+(idx+4)+'"><img src="'+obj.image+'" class="img-responsive" alt="Cinque Terre">     <h8> '+obj.nbView+' vues </h8>  <h4 align="middle" style="color:#E49B0F"> '+obj.title+' <h4>  <h5> '+obj.description+' </h5><div data-role="footer"> <h4>Footer</h4> </div> </div>');
    
}); 
           
          });
   });

Answer 1

jQuery Mobile为swipeleft和swiperight提供事件。所以你可以这样做：

$(document).on('swipeleft swiperight', '[data-role="page"]', function (e) {
    var dir = 'prev';
    if (e.type == 'swipeleft') {
        dir = 'next';
    }
    GoToNextPage($(this), dir);
});
function GoToNextPage($item, direction) {
    var $next;
    if (direction == 'next') {
        if ($item.next().length > 0) {
            $next = $item.next();
        } else {
            $next = $('[data-role="page"]').first();
        }
    } else {
        if ($item.prev().length > 0) {
            $next = $item.prev();
        } else {
            $next = $('[data-role="page"]').last();
        }
    }
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + $next.prop("id"), { });
}

滑动时，您可以获得当前页面和方向。然后在GoToNextPage（）中找出应该导航到的页面。

工作演示