如何在 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 and 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() 中确定您应该导航到哪个页面。

Working DEMO

如何在 jQueryMobile 中进行实时转换

How to make live transition in jQueryMobile

mobile

jquery

jquery-mobile