Question

我有一个jquery移动页面，其元视口设置如下：

<meta id="testViewport" name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>

我的页面布局如下（这是简化的）

<div data-role="page" id="article1">
    <div data-role="content">
    //page 1 stuff
    </div>
</div>

      <div data-role='page' id='article2'>
    <div data-role='content'>
    //page 2 stuff
    </div>
</div>

我设法在两个页面之间导航，并使用此脚本仅为第二页启用缩放缩放比例：

$(document).on('swipeleft', '.ui-page', function (event) { //swipe to plot
    if (event.handled !== true) // This will prevent event triggering more then once
    {
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
        event.handled = true;
    }
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content', "width=device-width,height=device-height,minimum-scale=1,maximum-scale=4");
    return false;
});

$(document).on('swiperight', '.ui-page', function (event) { //swipe to input
    if (event.handled !== true) // This will prevent event triggering more then once
    {
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            }, true, true);
        }
        event.handled = true;
    }
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content', "width=device-width,height=device-height,minimum-scale=1,maximum-scale=1");
    return false;
});

一切都运行良好，但如果第二页（“artice2”）的比例大于1，我想禁用“滑动导航”（对不起，如果该术语不正确），但是我无法弄清楚如何获得页面规模的价值。万一你不知道，我对此很新...所以非常感谢你的例子。

Answer 1

一旦页面显示pagecontainershow，您可以做的是保存屏幕的高度和宽度。然后，在滑动上获取当前的高度和宽度。如果当前高度/宽度大于初始高度/宽度，请忽略滑动。

/* vars */
var windowWidth, windowHeight, currentW, currentH;

$(document).on("pagecontainershow", function (e, data) {
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
}).on("swipeleft", "[data-role=page]", function (e) {
    currentW = window.innerWidth;
    currentH = window.innerHeight;
    if (currentW == windowWidth && currentH == windowHeight && $(this).next("[data-role=page]").length != 0) {
        $.mobile.pageContainer.pagecontainer("change", $(this).next("[data-role=page]"), {
            transition: "flip"
        });
    }
}).on("swiperight", "[data-role=page]", function (e) {
    currentW = window.innerWidth;
    currentH = window.innerHeight;
    if (currentW == windowWidth && currentH == windowHeight && $(this).prev("[data-role=page]").length != 0) {
        $.mobile.pageContainer.pagecontainer("change", $(this).prev("[data-role=page]"), {
            transition: "flip",
            reverse: true
        });
    }
});

<强> Demo

获得移动页面的规模

1 个答案: