Question

我遇到了从长页底部运行时不再出现页面转换的问题。

这是一个jsfiddle：http://jsfiddle.net/7WVHA/7/

如果打开示例并单击黑色导航按钮，则转换将按预期运行。但是，如果您返回到长页面，请滚动到底部并再次运行，不再发生转换，第二页就会立即显示。

非常感谢任何帮助。

<div data-role="page" id="long">
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Long Page</h1>
        <a href="#short" data-transition="flip" data-role="button" data-theme="b">DO TRANSITION</a>

    </div>
    <div data-role="content" data-theme="a">
        <div class="box">TEST BOX 1</div>
        <div class="box">TEST BOX 2</div>
        <div class="box">TEST BOX 3</div>
        <div class="box">TEST BOX 4</div>
        <div class="box">TEST BOX 5</div>
        <div class="box">TEST BOX 6</div>
        <div class="box">TEST BOX 7</div>        
    </div>
</div>
<div data-role="page" id="short">
    <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a">
        <h1>Short Page</h1>
        <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a>

    </div>
    <div data-role="content" data-theme="a">
        Short page
    </div>
</div>

Answer 1

这是jQuery Mobile在长页面上的默认行为，禁用了过渡动画。

您可以通过滚动到pagebeforechange上的页面顶部来解决此问题。

$(document).on("pagebeforechange", function () {
    window.scrollTo(0, $.mobile.defaultHomeScroll);
});

默认情况下，

$.mobile.defaultHomeScroll为0，除非根据设备/平台隐藏 url bar 。

<强> Demo

JQuery Mobile转换停止在长页面上工作

1 个答案: