Question

我有几个data-role =“page”（s），我使用data-transition =“slide”转换到下一页。我的问题是在移动设备（iOS或Android）上，下一页（第5页）滑动并重叠当前页面一秒钟。有什么想法修复？

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

Answer 1

找到了修复：

.ui-page { -webkit-backface-visibility：hidden; }

Answer 2

（overlap in slide transition Jquery Mobile 1.3.1的重复）

由此线索提供dantabel：https://github.com/jquery/jquery-mobile/issues/5764 这是答案！交换这部分jquery 1.3.2源代码

// 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上）

我想这个bug将在1.4中修复，我们会看到： - ）

jQuery Mobile数据转换幻灯片重叠

2 个答案: