Question

我使用新版本的jquery mobile（1.4.3）。我用导航链接到它们。如果我点击链接页面已加载，但如果我点击导航页面上的第二页，页面背景颜色将为黑色，导航将覆盖页面。

在jsfiddle中我创建了一个多页面，但问题看起来是一样的。

<body>
    <div data-role="panel" id="left-panel" data-theme="b" data-display="reveal">
        <ul data-role="listview" data-inset="false" data-theme="a" id="navigation">
            <li><a href="#trainings">Training</a>

            </li>
        </ul>
    </div>
    <!-- /panel -->
    <div data-role="page" id="mainpage">
        <div data-role="header" data-theme="b">
                <h1>News</h1>
    <a href="#left-panel" data-icon="grid" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
    <a href="settings.html" data-icon="gear" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Settings</a>

        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <ul data-role="listview" data-ajax="true" data-inset="false" id="newsList"></ul>
        </div>
        <!-- /content -->
    </div>
    <div data-role="page" id="trainings" data-url="trainings">
        <div data-role="header" data-theme="b">
                <h1>Trainings</h1>
    <a href="#left-panel" data-icon="grid" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
    <a href="settings.html" data-icon="gear" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Settings</a>

        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <ul data-role="listview" data-ajax="true" data-inset="false" id="newsList">
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>
        </div>
        <!-- /content -->
    </div>
</body>

$(function () {
    $("#left-panel").panel();
    $("#navigation").listview();
    $.mobile.defaultPageTransition = 'none';

    $(document).one("swipeleft swiperight", function (e) {
        if ($(".ui-page-active").jqmData("panel") !== "open") {
            if (e.type === "swiperight") {
                $("#left-panel").panel("open");
            }
        }
    });
});

我尝试使用自己的转换来修复它（参考https://stackoverflow.com/a/22576986/2136148），看起来这样可以解决问题：

http://jsfiddle.net/yh7guzvu/8/（加载缓慢，我怎样才能加速？）

http://jsfiddle.net/yh7guzvu/6/（覆盖淡入淡出 - >更快）

Answer 1

向jQuery Mobile报告了问题，将在版本1.4.5中修复

请参阅https://github.com/jquery/jquery-mobile/issues/7711

滑动面板，默认过渡无

1 个答案: