jQuery Mobile und iScroll Problem

So, ich hatte eine gute Lösung gefunden, um das zu lösen Feste Kopf-und Fußzeile-problem in jquery mobile-das ist die iscoll Bibliothek. Um die iscroll-Bibliothek zur Arbeit mit jquery mobile, ich bin mit diesem script: https://github.com/yappo/javascript-jquery.mobile.iscroll

Alles funktioniert gut für meine listing-Seiten (unter Verwendung von jquery mobile Listenansicht). Mein Inserat-Seiten werden dynamisch geladen, die mit ajax. Aber dann, als ich eine Produkt-detail-Seite soll zu Blättern, es hat überhaupt nicht funktioniert. In einigen Fällen, ich konnte nicht scrollen überhaupt. In einigen anderen Fällen, die das scrollen verhält sich wie ein Gummi-band-Effekt, es bringt Sie immer zurück an die Spitze erneut. Aber die header-und footer-navigation bars sind Feste wie das, was ich will, es zu sein.

So, hier ist ein Szenario. Ich habe eine listing-Seite (mit scrollen), wenn Sie auf eine Liste posten, sollten Sie die Produkt-detail auf einer anderen Seite. Der iscroll ausgelöst wird, auf pagebeforeshow Ereignisses, wie Sie sehen können, im inneren der yappo wrapper-Skript. Hier ist die Vorlage für mein Produkt-detail-Seite. Die Inhalte werden dynamisch geladen und an die scroller div.

<!-- PROMOTION DETAIL PAGE -->
  <div data-role="page" id="page-promotion-detail" data-iscroll="enable"> 
      <div class="header" data-role="header">
          <div class="sub-header-bg">
              <div class="title"></div>
              <a href="#" id="Back" data-rel="back" class="btn-header-left btn-back"><span>Back</span></a>
              <a href="#" id="Edit" class="btn-header-right btn-edit hidden"><span>Edit</span></a>
          </div>
      </div>
      <div class="content" data-role="content" data-theme="anz">
          <div data-iscroll="scroller" class="scroller">
              <div data-iscroll="scroller"></div>
          </div>
          <input type="hidden" id="paramPromotionID" name="paramPromotionID" value="" />
      </div>
      <div class="footer" data-id="footer" data-role="footer">
          <div data-role="navbar">
              <ul>
                  <li><a id="menuHome" href="#page-home" class="footer-icon footer-icon-home">Home</a></li>
                  <li><a id="menuMySpot" href="#page-myspot" class="footer-icon footer-icon-spot">My Spot</a></li>
                  <li><a id="menuOtherCountries" href="#page-other-countries" class="footer-icon footer-icon-country">Others</a></li>
                  <li><a id="menuSearch" href="#page-search" class="footer-icon footer-icon-search">Search</a></li>
              </ul>
          </div>
      </div>
  </div>

Weiß hier jemand, was ich verpasst oder jemand von Euch geschafft, iscroll zu arbeiten perfekt mit jQuery Mobile?

Bin ich mit jQuery Mobile beta 3 und iScroll 3.7.1.

Cheers

InformationsquelleAutor ronanray | 2011-09-24
  1. 1

    Ohne Blick auf die tatsächliche Anwendung ist schwer zu sagen, was die Lösung sein könnte. In der Vergangenheit bemerkte ich, dass die folgenden Probleme bei der Verwendung von iScroll und jQuery Mobile:

    • Wenn der Inhalt innerhalb des scrollbaren Bereichs hat die CSS-Regel "float" iScroll nicht in der Lage, um zu bestimmen, die Höhe des Inhalts. iScroll denken, dass es nichts zu scrollen. So müssen Sie möglicherweise überprüfen Sie die CSS-Regeln angewandt, um das scrollbare Inhalte.
    • jQuery Mobile automatisch bindet touch-event auf einige Elemente. Bei der Kombination mit iScroll-jQuery Mobile ist es wahrscheinlich eine gute Idee, Sie zu binden eine separate Funktion, um die 'touchmove' Ereignis und verhindern, dass das Ereignis von bubbling-up ( event.preventDefault() ). Dadurch jQuery Mobile nicht in der Lage sein zu handhaben, die touch-event während der Benutzer die Interaktion mit dem iScroll element.

    Diese sind Allgemeine Empfehlung, aber ich hoffe, Sie können helfen. Ich schrieb ein kleines jQuery-Erweiterung zum einbinden von jQuery mit iScroll. Sie können bekommen it bei:

    http://appcropolis.com/blog/jquery-wrapper-for-iscroll/

    InformationsquelleAutor appcropolis
  2. 0

    Ich tiefer in die iScroll-Dokumentation fand ich heraus, dass ich aktualisieren müssen, die iscroll Objekt jedes mal, wenn das DOM verändert. Dies ist erforderlich, weil es braucht, um eine Neuberechnung der tatsächlichen Höhe /Breite nach den änderungen.

    Sollte ich habe gerade erfahren, Objective-C,...und versuche die Entwicklung von apps mit HTML ist einfach zu viel Aufwand..zumindest für jetzt.

    • zu tun, die dünne ronranray sagte: definieren Sie die myScroll - variable Global und rufen Sie es über myScroll.refresh()
    InformationsquelleAutor ronanray
  3. 0

    In HTML5-basierte Anwendung, die smooth-scrolling ist immer eine Herausforderung. Es gibt Dritte-Bibliotheken zur Durchführung von smooth scroller, aber es ist die Umsetzung sehr Komplex. In diesem scroller Bibliothek, Benutzer müssen nur hinzufügen, Scrollbar=true-Attribut in das scrollbare division, dann das div scrollt, wie glatt native scroller. Bitte Lesen readme.doc die Datei zuerst mit der Arbeit beginnen

    Bibliothek link

    http://github.com/ashvin777/html5

    Vorteile :
    1 Keine Notwendigkeit, manuell erstellen, scroller-Objekt.
    2 Scroller wird automatisch aktualisiert, im Falle von Daten, die geändert wird, in der Scrollbox.
    3, So dass keine Notwendigkeit, manuell aktualisieren.
    4 Geschachtelte Scrollen von Inhalten auch möglich sein und keine dual-scrolling-Problem.
    5 Funktioniert für alle webkit-Motoren.
    6 Im Fall, wenn der Benutzer wünscht, dass der Zugang scroller-Objekt, dann kann er darauf zugreifen, indem Sie schreiben “SElement.scrollable_wrapper". scrollable_wrapper id ist die durchlaufbaren-division ist definiert in der html-Seite.

    InformationsquelleAutor Ashvin777
Schreibe einen Kommentar