jQuery Mobile数据转换幻灯片重叠 [英] jQuery Mobile data-transition slide overlap

问题描述

我有几个data-role ="page"(s)，我使用data-transition ="slide"转换到下一页.我的问题是在移动设备(iOS或Android)上，下一页(第5页)滑动并与当前页面重叠一秒钟.对修复有任何想法吗?

I have several data-role="page"(s) and I use data-transition="slide" to transition to the next page. My issue is on mobile (iOS or Android), the next page (page5) slides and overlaps the current page just for a second. Any idea on a fix?

<div data-role="page" id="page4">
   <div data-role="header" class="header" data-position="fixed" data-id="staticS">
      <h1>Page 4</h1>
   </div>
   <div data-role="content">    
      content here
   </div>
  <div class="footer" data-role="footer" data-position="fixed" data-id="staticS">
    <a href="#page5" data-transition="slide"></a>
  </div>
</div>

推荐答案

(此线程中的dantabel提供: https://github.com/jquery/jquery-mobile/issues/5764 这就是答案！ 交换jquery 1.3.2源代码的这一部分

Courtesy of dantabel in this thread : https://github.com/jquery/jquery-mobile/issues/5764 Here's the answer ! Exchange this part of the jquery 1.3.2 source code

// line 3674 - jquery.mobile-1.3.2.js
startOut = function() {
    // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
    if ( !sequential ) {
        doneOut();
    }
    else {
        $from.animationComplete( doneOut );
    }

    // Set the from page's height and start it transitioning out
    // Note: setting an explicit height helps eliminate tiling in the transitions
    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );
},

有了这个:

startOut = function() {
    if ( !sequential && reverse) {
        doneOut();
    } else if(sequential) {
        $from.animationComplete( doneOut );
    }

    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );

    if ( !sequential && !reverse) {
        doneOut();
    }
},

然后它就像一个魅力！ (至少在iOS 7上)

And then it works like a charm ! (at least on iOS 7)

我想这个错误将在1.4中修复，我们将看到:-)

I guess this bug will be fixed in 1.4, we'll see :-)

这篇关于jQuery Mobile数据转换幻灯片重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！