20

我对 jQuery Mobile 应用程序有一个大问题：我正在使用自定义函数（它们由 onClick 触发）用 currentPage 切换页面。

它仅发生在使用集成浏览器更改（由于 ajax 请求）的站点上的 Android 设备上。iOS 和 Chrome 运行良好。

单击元素后，动画开始，但在结束之前，它切换回旧页面。半秒后，它切换回新的。

我在这里制作了一个关于这个错误的电影：http ://www.youtube.com/watch?v=sXxvVUxniNg

非常感谢

代码（CoffeeScript）：

class Guide

    @categoriesLoaded = false

    @loadSearch: ->

        $.mobile.changePage $("#guide"),
            transition: 'slide'
            changeHash: false

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) ->
                output = Mustache.render $("#tmpl-guide-categories-select").html(), 
                    categories: data

                $("#guide-search-category").append output

                $("#guide-search-category").val($("#guide-search-category option:first").val());

window.WgSwitchGuide = ->
        Guide.loadSearch
4

6 回答 6

10

我遇到了同样的问题。我尝试了一切，最终以解决方案结束。我发现错误主要在浏览器中。所以我将pushStateEnabled的配置设置为false。我通过执行以下操作来添加此脚本。

<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>

它应该在调用 jquery-mobile 脚本之前添加，有关更多信息，您可以在JQuery 描述中看到它

它解决了不再跳回的问题。

于 2013-07-10T03:57:27.863 回答
4

您会尝试在第一页的点击事件中添加事件 stopPropagation 和 preventDefault 方法吗？这样就不会触发点击事件的默认动作。此外，stopPropagation 防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

  • event.stopPropagation();
  • event.preventDefault();

例子：

$("p").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    // change page
});
于 2013-02-24T16:45:04.677 回答
4

我在android和ios上都遇到了完全相同的问题。对我来说，它发生在繁重的页面上，即具有复杂元素的页面等。看起来你正在使用“幻灯片”过渡，这也是我正在使用的。取出这些页面的页面转换（即 $.mobile.changePage("page.html", { transition: "none" })）为我解决了这个问题。希望这可以帮助。

如果要保留过渡，可以尝试在显示前一页时先使用 $.mobile.loadPage 预加载页面，然后显示过渡。我自己也在探索这条路线，但它可能值得一试。

编辑：好的 - 我探索了最后一个建议，这似乎不起作用。将坚持第一个选项。

于 2013-01-09T07:17:45.340 回答
2

在尝试了数周来寻找解决方案之后，我最终修改了 JQM 库以一个接一个地禁用页面转换。这不是一个好的解决方案，但这是我唯一可以开始工作的事情。

我让页面在 $.mobile.changePage 和锚链接上跳回。我使用了幻灯片过渡，但删除它并没有解决问题。将 pushStateEnabled 设置为 false 也不起作用。所有设备和浏览器都发生了跳跃（无论如何我测试过）。

所以这就是我对 JQM 库 (v1.3.2) 所做的。

在定义 $.mobile.changePage 函数之前，我添加了：

var justChangedPage = false;

然后在函数中有一行：

if ( pbcEvent.isDefaultPrevented()) {
    return;
}

我改为：

if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
    return;
}

然后在 $.mobile.changePage 函数的这一部分之后：

if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
    settings.dataUrl = documentUrl.hrefNoHash;
}

我补充说：

justChangedPage = true;
setTimeout(function() {
    justChangedPage = false;
}, 500);

（把它放在函数的前面是行不通的——所有这些东西在一个页面转换中执行了不止一次。半秒似乎是阻止页面跳转的最小超时。）

我希望这对某人有帮助，即使它是一个黑客......

于 2013-11-25T22:26:37.290 回答
0

你的 JQM 和 Android 版本是多少？

我不确定我是否理解正确。我认为过渡闪烁可能来自以下假设。

  1. 繁重的页面 DOM 过渡。
  2. 在 css 文件的某处使用“translate3d”。
  3. 不使用“硬件加速”功能。通过将此行添加到您的AndroidManifest.xml中启用<application>

安卓：硬件加速=“真”

于 2013-02-27T09:10:19.577 回答
-1

我遇到了完全相同的行为，似乎很少有人遇到同样的问题。起初我以为是 jQuery 移动库引起的。后来，我设法找到问题出在哪里，这是我自己的代码中的一个错误。我做了一个演示来解释这个问题。

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

希望这可以为遇到同样问题的人提供提示。

$(document).on('pagebeforeshow', '#page2', function(){
    console.log('Page2 before show');
    var htmlGeneratedOnTheFly = '<ul data-role="listview" data-inset="true">';
    for(var i=0; i<4; i++)
    {
        htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>';
    }
    htmlGeneratedOnTheFly += '</div>';
    $('#page2UiContent').empty();
    $('#page2UiContent').append(htmlGeneratedOnTheFly);
    $('#page2UiContent').trigger('create');
    
   
    //////////////////////////////////////////////////
    //The following section is where the bug is generated. 
    //Each on "page2 before show event" will add a OK Button click handler. 
    //The handlers never get cleared.
    //More and more handler is added to the Page2 OK button as pages going back and forth.
    //Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. 
    //To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){});
    //////////////////////////////////////////////////
    $('#page2OkButton').click(function(){
        console.log("Page 2 OK Button clicked!!!");
        $.mobile.changePage('#page1', {transition:"flip"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="page1" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 1</h5>
    </div>
    <div data-role="main" class="ui-content">
        <h2>jQuery mobile changepage jumps back to old page demo</h2>
        <p>Click "Go To Page 2" button to go to page2</p>
        <p>On Page2 click Ok Button to come back to page1</p>
        <p>Keeping going back forth between two pages for few times.</p>
        <p>Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. </p>
        <h2>Please read the comments in the javascript for explaination</h2>
        <a href="#page2" data-transition="flip" class="ui-btn ui-icon-carat-r ui-btn-icon-right">Go To Page 2</a>
    </div>
</div>

<div data-role="page" id="page2" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 2</h5>
    </div>
    <div id="page2UiContent" data-role="main" class="ui-content">
    </div>
    <div data-role="footer" data-position="fixed" style="text-align:center;">
        <div data-role="navbar">
            <ul>
                <li><a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left">OK</a></li>
            </ul>
        </div>
    </div>
</div>

于 2015-07-28T04:29:48.737 回答