在 jQuery Mobile 中滑动返回？

Question

我正在尝试 jQuery Mobile，因为我无法通过滑动返回页面以在 jQTouch 中正常工作。但作为 jQuery Mobile 的新手，我不知道如何实现滑动，以及如何向右滑动导致返回到上一页。我一直在谷歌搜索并搜索文档，但找不到它，所以我非常感谢一些帮助。

编辑：

我在谷歌搜索更多时发现了这个解决方案：

        $('body').live('pagecreate', function (event) {
            $('div.ui-page').live("swipeleft", function () {
                var nextpage = $(this).next('div[data-role="page"]');
                // swipe using id of next page if exists
                if (nextpage.length > 0) {
                    $.mobile.changePage(nextpage, 'slide');
                }
            });
            $('div.ui-page').live("swiperight", function () {
                var prevpage = $(this).prev('div[data-role="page"]');
                // swipe using id of previous page if exists
                if (prevpage.length > 0) {
                    $.mobile.changePage(prevpage, 'slide', true);
                }
//                history.back();
//                return false;
            });
        });

这确实有效，但看起来不太稳定。当您滑动时，它会来回跳跃一点。我还尝试了最后注释掉的代码 - History.back()，这是另一个网站上建议的。但这似乎更加不稳定，导致各种奇怪的跳跃。

Answer 1

您可以使用 jQuery .live“向左滑动”和“向右滑动”事件。

示例：

 $(document).ready(function() {

      $('.yourPage').live('swipeleft swiperight',function(event){
          if (event.type == "swiperight") {
              var prev = $("#previndex",$.mobile.activePage);
              var previndex = $(prev).data("index");
              if(previndex != '') {
                  $.mobile.changePage({url:"index.php",type:"get",data:"index="+previndex},"slide",true);
              }
          }
          if (event.type == "swipeleft") {
              var next = $("#nextindex",$.mobile.activePage);
              var nextindex = $(next).data("index");
              if(nextindex != '') {
                  $.mobile.changePage({url:"index.php",type:"get",data:"index="+nextindex});
              }
          }
          event.preventDefault();
      });
});

此外，此 YouTube 视频也可能对您有帮助。
http://www.youtube.com/watch?v=Ij1RYI1p7rM

Answer 2

蒂莫西的答案看起来不错，但有人可能更喜欢这个类似且现成的解决方案：

http://filamentgroup.com/lab /jquery_mobile_pagination_plugin/

由 jQuery Mobile 框架团队的 2 位核心成员今天发布

这是一个让用户轻松滑动的插件页。可能不适合每个用例，但肯定做得很好（如果不是那些人，还有谁会知道如何使用 jqm 做某事？:)）

Answer 3

正确的解决方案是使用历史对象并允许 JQM 根据我们向浏览器发送的方向选择正确的（左或右）转换。

因此，将默认转换设置为“滑动”并将所有具有数据转换属性的链接设置为“淡入淡出”，然后将 History.back/forward 附加到滑动事件：

$.mobile.defaultPageTransition = 'slide';
$( "body" ).on( 'swiperight', function() {history.back()}); 
$( "body" ).on( 'swipeleft', function() {history.forward()});   
$("a").attr("data-transition", "fade");

如果您正在创建动态内容（我非常希望您是年轻人），请务必在触发“create”事件后在所有链接上设置 data-transition="fade" 属性。

例如：

$("#mydiv")
.html("<a href="#page-somewhere"></a>")
.trigger("create")
.find("a").attr("data-transition", "fade");

Answer 4

在 jquery.mobile-1.0-rc2 中，向后滑动被提及为

$.mobile.changePage('topage', { transition: "slide",
反向：真实，
});

Answer 5

只是分享我的代码。我也一直在摆弄这个，最终得到了这个：

var allowGlobalSwipe = true; // If you want to disable it at some point

$(function() {
  $(window).on("swipeleft", jqmForward).on("swiperight", jqmBack);

  // This is an example of where you may want to disable the swipe
  $('#slideContainer').swiper({
    onTouchStart: function () { allowGlobalSwipe = false; },
    onTouchEnd: function () { allowGlobalSwipe = true; }
  });
});

function jqmBack(e) {
  if (!allowGlobalSwipe) return;
  var prevpage = $('div.ui-page-active').prevAll('div[data-role="page"]');
  if (prevpage.length > 0)
    $.mobile.changePage($(prevpage[0]), { transition: "slide", reverse: true }, true, true);
}
function jqmForward(e) {
  if (!allowGlobalSwipe) return;
  var nextpage = $('div.ui-page-active').nextAll('div[data-role="page"]');
  if (nextpage.length > 0)
    $.mobile.changePage($(nextpage[0]), { transition: "slide" }, false, true);
}

请注意，我使用 prevAll 和 nextAll 因为上一页的 div 可能并不总是紧邻当前页面的 div 之前。

Answer 6

在 jquery.mobile-1.0-rc2 中，滑动到后面即可提及

$.mobile.changePage('topage', {  transition: "slide", 
                             reverse: true,
                           });

Answer 7

function ChangePage(pageId,iPageIndex) {
    var forward = iCurrCardIndex < iPageIndex;
    iCurrCardIndex = iPageIndex;

    $.mobile.changePage("#" + pageId, "slide", !forward, true);
}