在 jQuery Mobile 中滑动返回？

Posted 2023-04-13

【中文标题】在 jQuery Mobile 中滑动返回？

【英文标题】：Swipe to go back in jQuery Mobile?

【发布时间】：2011-10-31 18:56:19

【问题描述】：

我正在试用 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()，这是在另一个站点上建议的。但这似乎更加不稳定，导致各种奇怪的跳跃。

【问题讨论】：

如@Sudheer 回答的那样，将选项作为大括号中的对象发送时，来回跳转消失了。

【参考方案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

【讨论】：

好的，谢谢，但是 prev 和 next 变量是如何工作的？我怎么知道选择器（#previndex 和 #nextindex）？

其实，请先解释一下那里发生了什么，我从来没有在jQuery中声明过这样的变量，对jQuery还是不太熟悉......

回答您的问题... next 和 prev 只是引用 div (#nextindex / #previndex) 和上下文的变量。所以它看起来像这样 -> $('element',context);类似于将变量设置为指向这样的元素： var myDiv = $('#myDiv');

你也可以这样做 var prev = $.mobile.activePage.find("#previndex");实际上，这可能比我上面写的更好/更快。

【参考方案2】：

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

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

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

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

【讨论】：

实际上，它可以很好地与按钮配合使用，但我发现与上面包含的原始代码相同的问题 - 即滑动非常不稳定。它来回闪烁，您永远不知道滑动后会进入哪个页面...

您可能希望将其归档为错误。细丝组会为您整理;)

【参考方案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");

【参考方案4】：

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

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

【讨论】：

+1：将选项作为大括号中的对象发送时，来回跳转消失了。

【参考方案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 之前。

【参考方案6】：

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

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

【参考方案7】：

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

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

【讨论】：

我不明白这个答案。它在做什么？它是对mobile.ChangePage 的某种覆盖吗？如果是这样，我该如何使用它？另外，什么是 iCurrCardIndex 等？