jquery - 在 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