javascript - jQuery Mobile 将微调器绑定(bind)到 ChangePage

Question

经过大量谷歌搜索和阅读论坛后，我没有找到合适的答案。

到目前为止，我发现的是如下内容:

• 显示加载信息
• 调用更改页面
• 隐藏加载信息

这可行，但我每次调用加载/更改页面时都必须这样做(很多)。

这会让我要么像下面那样让中间人发挥作用:

function customLoader(url){
    showLoader();
    $.mobile.changePage(url);
    hideLoader();
}

是否可以将它绑定(bind)到更改页面事件？所以它从第二个 changePage 开始显示，但一旦 changePage 离开就隐藏......

我知道上面的中间人方法会起作用，但我希望实现更整洁、更好的方法，因为有很多 html/js 文件。

Answer 1

像这样:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $.mobile.showPageLoadingMsg(true);
        setTimeout(function () {
            $.mobile.changePage('#second');
        }, 1000);
    });    
});

$("#second").live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

超时只是为了让您可以看到它正在成功运行。这是一个简单的示例，因此可以快速触发转换。在您的真实代码中将其删除。

这是一个例子:http://jsfiddle.net/Gajotres/arrHd/

当页面 A 转换到页面 B 时，每个更改页面事件周期都有一个事件发生顺序。无论使用哪个操作触发更改页面，您都可以在成功加载页面 B 时将其禁用。如果您想找到有关页面加载顺序的更多信息，请查看此链接:https://stackoverflow.com/a/14010308/1848600 .在那里你会发现很多关于 jQM 页面动态的内容。

如果您想在每个页面转换中实现这一点，请使用:

$('[data-role="page"]').live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

每次成功加载和显示不同的页面时，这将隐藏一个 ajax 加载器(如果它是打开的)。