Блог

Главная - Вопросы по программированию - iScroll не будет увеличивать масштаб приложений cordova

iScroll не будет увеличивать масштаб приложений cordova

#javascript #cordova #iscroll

#javascript #кордова #iscroll

Вопрос:

Я пытался создать вкладку в моем приложении cordova, в которой отображается карта. Я хочу, чтобы пользователи могли нажимать для увеличения и уменьшения изображения и панорамирования. Я использовал последнюю сборку iScroll и не смог заставить что-либо работать правильно. Недавно я наткнулся на эту демонстрацию

http://lab.cubiq.org/iscroll/examples/zoom/

Который делает именно то, что я хочу, чтобы мое приложение выполняло и работало в браузере моего телефона. Однако, когда я скопировал 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>

Если кто-нибудь может помочь мне понять, почему это работает в браузере, но не при переводе в машинный код, или как заставить его работать, я буду у вас в долгу.

Комментарии:

1. О, сценарии с комментариями внизу взяты из того времени, когда я пытался решить эту проблему с помощью hammer.js …

2. ОБНОВЛЕНИЕ: я вставил демонстрационную версию iScroll5 точно так же, как я делал с демонстрационной версией iScroll4, и она работала еще хуже, это беспорядок, вероятно, больше не будет использовать подобную структуру. Лучше всего просто написать это дважды.

Метки: