在 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

Timothy 的回答看起来不错，但有人可能更喜欢这种类似且现成的解决方案：

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

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

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

Answer 3

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

因此，将默认转换设置为“slide”，并将所有具有 data-transition 属性的链接设置为“fade”，然后将 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);
}