2016-06-03 11 views
0

Ich entwickle eine Cordova Anwendung, die zuvor das JQuery mobile 1.4.5 Skript verwendet. Ein früheres Problem bei Android, bei dem der Übergang von einer Seite zu einer anderen unnötiges Flimmern verursachte, ließ mir keine andere Wahl, als den Anruf in das mobile Skript JQuery zu entfernen.So erhalten Sie einen reibungslosen und schnellen Bildlauf in iOS in einer Cordova App ohne JQuery Mobile Skript

<script src="js/jquery.mobile-1.4.5.js"></script> 

Stattdessen habe ich einfach die CSS links

<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" /> 

und verwendet, um die mobilen Klassen JQuery die Stile der Eingänge zu ändern, Knöpfe, usw., war die vorherige App Stil (diese Halte besonders großer Bedeutung bedenkt, dass Die App ist fast fertig und das Design, in dem jquery mobile stark genutzt wurde, musste beibehalten werden.

Als ich das tat, fand ich heraus, dass auf iOS das Scrollen nicht mehr schnell und reibungslos wie vorher war. Ich habe versucht, zu der alten Methode zurückzukehren, d. H. Das mobile Skript j-query zu verwenden, und die iOS-Funktion läuft normal. Dies beweist, dass J-Query Mobile ein bestimmtes Skript hatte, das den iOS-Scroll "behebt". Ich möchte nur dieses Skript verwenden, um die Scroll-Probleme zu beheben. Abgesehen von diesem Problem funktioniert die App und sieht gut aus.

Unten ist die "Vorlage" HTML jeder Seite. Wie Sie sehen, sind die jquery-mobile-Klassen, die normalerweise automatisch um die Komponenten der App gewickelt werden, nachdem die Seitenladevorgänge manuell den spezifischen Komponenten zugewiesen wurden.

<html class="ui-mobile js csstransitions"> 
<head> 
</head> 

<body class="ui-mobile-viewport ui-overlay-a sidy--panels-closed"> 
    <div class="sidy ui-page ui-page-theme-a ui-page-active"> 

     <nav>Menu</nav> 
     <nav>Search</nav> 

      <div class="sidy__content"> 
        <div id="wrapper" class="wrapper"> 
         <div>Fixed header</div> 
         <div>Container</div> 
         <div>Fixed Footer</div> 
        </div> 
      </div> 
    </div> 
    <script></script> 
</body> 
<html> 

Ich habe versucht, intensiv auf stackoverflow und anderen Quellen zu suchen. Für z.B. Dieser Fix funktionierte nicht, wenn er auf dem Tag versucht wurde. Da die feste Kopf- und Fußzeile sich mit dem Scrollen fortbewegt und erst dann wieder in ihre ursprüngliche Position zurückkehrt, wenn der Scrollvorgang beendet ist. Beim Versuch, die Klasse auf dem Container zuzuordnen (wo das tatsächliche Scrollen stattfinden muss); nichts passiert.

cssClass{ 
     overflow-y: scroll; 
     -webkit-overflow-scrolling: touch; 
} 

Was nützlichsten wäre mir, welcher Teil des JQuery Mobile Skript wissen, ist die iOS Scrollen schnell sehr glatt und nativer und handeln aussehen lässt!

Vielen Dank für Ihre Hilfe!

Antwort

0

Ihr css'ed div benötigt für IOS (Safari) eine nicht dynamische Größe in der Bildlaufrichtung, d. H. Die Höhe in Ihrem Beispiel.

eine Höhe Element hinzufügen:

cssClass{ 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
    height: ...px; 
} 

und sollte es funktionieren.

Ich hatte das gleiche Problem und konnte es mit dieser zusätzlichen Eigenschaft lösen. Ich benutze React.JS, so konnte ich leicht die Höhe berechnen, so dass es für verschiedene Geräte korrekt war, angepasst für Kopf- und Fußzeilen usw. Mit Javascript kann man es mit der Variablen window.innerHeight berechnen (zumindest für Cordova, ich tu 'nicht t wissen, ob dies eine Standard-Browser-Variable ist).