jQuery 및 Phonegap에서 스 와이프가 예기치 않게 작동합니다.

this answer에 주어진 코드를 사용하여 Phonegap 애플리케이션에서 여러 페이지를 스 와이프합니다.jQuery 및 Phonegap에서 스 와이프가 예기치 않게 작동합니다.

그러나 리로드를 시도 할 때 라이브 기능이 더 이상 사용되지 않고 페이지 아래에 "0"이 표시되는 것으로 보입니다. 더 많이 시도하자마자, 0의 문자열이 생성되고, 각각의 숫자는 그 페이지의 재로드 횟수를 알려줍니다. 길다는 짧은 이야기입니다. 스 와이프가 작동하지만 스 와이프 한 페이지의 각로드에 0이 표시됩니다.

나는 이걸 바꿔 보려고했는데 작동하지 않는 것 같아. Phonegap 2.1.0, jQuery 1.8.2, jQuery Mobile 1.1.1을 사용하고있어.

<script type="text/javascript"> 
    $('div.ui-page').on("swipeleft", function() { 
     var nextpage = $(this).next('div[data-role="page"]'); 
     if (nextpage.length > 0) { 
      $.mobile.changePage(nextpage, { 
       transition: "slide", 
       reverse: false 
      }, true, true); 
     } 
    }); 
    $('div.ui-page').on("swiperight", function() { 
     var prevpage = $(this).prev('div[data-role="page"]'); 
     if (prevpage.length > 0) { 
      $.mobile.changePage(prevpage, { 
       transition: "slide", 
       reverse: true 
      }, true, true); 
     } 
    }); 
</script>

편집 :이 함께 노력하고 초기 문제와 같은 상황이 발생합니다

에의 버전 바인딩 해당하는지

<script type="text/javascript"> 
    $(document).delegate('div.ui-page', 'swipeleft', function() { 
     var nextpage = $(this).nexy('div[data-role="page"]'); 
     if (nextpage.length > 0) { 
      $.mobile.changePage(nextpage, { 
       transition: "slide", 
       reverse: false 
      }, true, true); 
     } 
    }); 
    $(document).delegate('div.ui-page', 'swiperight', function() { 
     var prevpage = $(this).prev('div[data-role="page"]'); 
     if (prevpage.length > 0) { 
      $.mobile.changePage(prevpage, { 
       transition: "slide", 
       reverse: false 
      }, true, true); 
     } 
    }); 
</script>

출처

2012-11-16 jontxu

내 자신의 질문에 답하는 것이 좋은 예절이라면 나는 알지 못한다. 그러나 나는 해결책을 찾았고, 그것이 보이는 것이 편리하다고 생각한다.

jQuery 1.8.2와 jQuery mobile 1.2.0으로 업데이트되었으며 모든 것이 작동했습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>EventApp</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" /> 

    <script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('div.ui-page').live("swipeleft", function() { 
     var nextpage = $(this).next('div[data-role="page"]'); 
     if (nextpage.length > 0) { 
      $.mobile.changePage(nextpage, { 
       transition: "slide", 
       reverse: false 
      }); 
     } 
    }); 
    $('div.ui-page').live("swiperight", function() { 
     var prevpage = $(this).prev('div[data-role="page"]'); 
     if (prevpage.length > 0) { 
      $.mobile.changePage(prevpage, { 
       transition: "slide", 
       reverse: true 
      }); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h2 class="ui-title">Page one</h2> 
    </div> 
    <div data-role="content"> 
     You are in page one. 
    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-icon="home">Home</a></li> 
       <li><a href="b.html" data-icon="info">Info</a></li> 
       <li><a href="#" data-icon="gear">Settings</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 
</div> 
<div data-role="page"> 
    <div data-role="header"> 
     <h2 class="ui-title">Page two</h2> 
    </div> 
    <div data-role="content"> 
     You are in page two. 
    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-icon="home">Home</a></li> 
       <li><a href="b.html" data-icon="info">Info</a></li> 
       <li><a href="#" data-icon="gear">Settings</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 
</div> 
<div data-role="page"> 
    <div data-role="header"> 
     <h2 class="ui-title">Page three</h2> 
    </div> 
    <div data-role="content"> 
     You are in page three. 
    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-icon="home">Home</a></li> 
       <li><a href="b.html" data-icon="info">Info</a></li> 
       <li><a href="#" data-icon="gear">Settings</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 
</div> 
<div data-role="page"> 
    <div data-role="header"> 
     <h2 class="ui-title">The map</h2> 
    </div> 
    <div data-role="content"> 
     <div id="map_canvas"></div> 
    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-icon="home">Home</a></li> 
       <li><a href="b.html" data-icon="info">Info</a></li> 
       <li><a href="#" data-icon="gear">Settings</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 
</div> 
</body>

그리고 당신은 the JsFiddle is here

출처

2012-11-17 17:21:29 jontxu

. 당신이 생각하는 페이지하지 않을 수 있으며, 이전/다음 요소가 없을 수 있습니다 - 당신이 $ (이)을 의미 내용을 확인,

$(document).on("swipeleft", "div.ui-page", function...

더 이벤트를 디버깅해야 라이브 교체하십시오.

앱이 설정되는 방식에 따라 일정 금액이 달라 지지만 일반적으로 특정 순서로 존재하는 페이지 div는 신뢰할 수 없습니다.

또한 changePage에 대한 호출이 현재 문서 ( http://jquerymobile.com/test/docs/api/methods.html)와 일치하지 않습니다. 결국 두 개의 True는 무엇입니까?

출처

2012-11-16 12:33:34

감사를 원하는 경우 : 작동 예는 여기! 그러나 같은 일이 일어납니다. 내 말은, 완벽하게 작동하지만 0이 페이지 아래에 나타나고 나를 괴롭 히고있다. 나는 그것이 다른 자바 스크립트 상호 작용 또는 ChangePage 자체라고 생각한다. – jontxu

changePage에 대한 부러진 호출로 인해 다시로드가 발생할 수 있지만 게시 한 코드에는 아무 것도 없어도 아무 것도 쓸 수 없습니다. –

예. 그것은 응용 프로그램의 인덱스이며, 문제는 pageShow 또는 pageCreate 리스너가 없을 수도 있다고 생각합니다. 수업이 끝나고 나중에 시험해 보겠습니다. 어쨌든 고마워. – jontxu

jQuery 및 Phonegap에서 스 와이프가 예기치 않게 작동합니다.

답변

관련 문제