Javascript iScroll不会放大cordova应用程序_Javascript_Cordova_Iscroll

Javascript iScroll不会放大cordova应用程序

javascript cordova

Javascript iScroll不会放大cordova应用程序,javascript,cordova,iscroll,Javascript,Cordova,Iscroll,我一直试图在我的cordova应用程序中有一个显示地图的选项卡。我希望用户能够捏，放大和缩小图像和平移。我使用了最新的iScroll版本，但无法使任何东西正常工作。我最近遇到了这个演示这正是我想让我的应用程序做的，并在我的手机浏览器中工作。然而，当我复制了这个演示的iscroll.js和源代码，并将其粘贴到我的应用程序中，通过cordova进行测试时，我无法在我的android手机或ios模拟器上缩放，只能四处平移。我已经在页面上实现了同样的效果，我想将其应用到： <!DOCTYPE

我一直试图在我的cordova应用程序中有一个显示地图的选项卡。我希望用户能够捏，放大和缩小图像和平移。我使用了最新的iScroll版本，但无法使任何东西正常工作。我最近遇到了这个演示

这正是我想让我的应用程序做的，并在我的手机浏览器中工作。然而，当我复制了这个演示的iscroll.js和源代码，并将其粘贴到我的应用程序中，通过cordova进行测试时，我无法在我的android手机或ios模拟器上缩放，只能四处平移。我已经在页面上实现了同样的效果，我想将其应用到：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="js/iscroll.js"></script>

    <script type="text/javascript">
        var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper', { 
            zoom:true,
            onBeforeScrollStart:null,
            zoomMin:0.25,
            zoomStart:0.5,
            });
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        document.addEventListener('DOMContentLoaded', loaded, false);

    </script>

    <style type="text/css">


    html {
    -ms-touch-action: none;
    }

    body {
    overflow: hidden;
    }

    #wrapper {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    background: #ccc;
    overflow: auto;
    }

    #scroller {
    position:relative;
    background: #ccc;
    /*-webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    width:725px;
    padding:0;
    }

    img {
        -webkit-transform:translate3d(0,0,0);
    }
    </style>
</head>
<body Onload="loaded()">
    <ons-screen>
        <ons-navigator title="Map">
            <div id="wrapper">
                <div id="scroller">
                    <!--<iframe src="thing.html" style="width:100%; height:100%"></iframe>-->
                    <img src="img/map.png"></img>
                </ons-page>
            </div>
        </ons-navigator>
    </ons-screen>
</body>
<!--<script src="js/hammer.min.js"></script>
<script src="js/myLogic.js"></script>-->
</html>


迈斯克罗尔变种；
函数加载（）{
myScroll=newiscroll（'wrapper'，{
真的，
onBeforeScrollStart:null，
zoomMin:0.25，
zoomStart:0.5，
});
}
addEventListener（'touchmove'，函数（e）{e.preventDefault（）；}，false）；
document.addEventListener（'DOMContentLoaded'，loaded，false）；
html{
-ms触摸动作：无；
}
身体{
溢出：隐藏；
}
#包装纸{
位置：绝对位置；
z指数：1；
顶部：3px；
底部：3px；
左：3px；
右：3px；
背景：#ccc；
溢出：自动；
}
#卷轴{
位置：相对位置；
背景：#ccc；
/*-webkit触摸标注：无*/
-webkit点击高亮颜色：rgba（0,0,0,0）；
宽度：725px；
填充：0；
}
img{
-webkit转换：translate3d（0,0,0）；
}

如果有人能帮我弄清楚为什么这可以在浏览器中使用，但在翻译成本机代码时不能使用，或者如何使其工作，我将永远欠你的债。

哦，底部的注释脚本是我尝试使用hammer.js解决此问题时使用的…更新：我粘贴了iScroll5演示，与使用iScroll4演示时完全一样，它的性能甚至更差，这个东西一团糟，可能不会再使用这样的框架了。最好只写两次。