jQuery Mobile и iScroll Проблема

Question

Итак, я нашел хорошее решение для решения проблемы с фиксированным верхним и нижним колонтитулами в jquery mobile, который является библиотекой iscoll. Чтобы заставить библиотеку iscroll работать с jquery mobile, я использую этот сторонний скрипт: https://github.com/yappo/javascript-jquery.mobile.iscroll

Все отлично работает для моих страниц со списком (с помощью jquery mobile list list). Мои страницы со списком загружаются динамически с помощью ajax. Но потом, когда я создал страницу с информацией о продукте, которая должна прокручиваться, она вообще не работала. В некоторых случаях я не мог прокрутить вообще. В некоторых других случаях прокрутка ведет себя как эффект резиновой ленты, она всегда снова возвращает вас к вершине. Но панели навигации верхнего и нижнего колонтитула исправлены так, как я хочу.

Итак, вот сценарий. У меня есть страница со списком (с прокруткой), когда вы нажимаете на любой элемент списка, вы должны увидеть детали продукта на другой странице. Iscroll запускается на событии pagebeforeshow, как вы можете видеть в сценарии оболочки yappo. Вот шаблон моей страницы с описанием товара. Контент будет динамически загружен и добавлен в 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>

Кто-нибудь здесь знает, что я пропустил, или кому-то из вас, ребята, удалось заставить iscroll отлично работать с jQuery Mobile?

Я использую jQuery Mobile beta 3 и iScroll 3.7.1.

Приветствия

Answer 1

Без рассмотрения реального приложения трудно сказать, каким может быть решение.В прошлом я замечал следующие проблемы при использовании iScroll и jQuery Mobile:

• Если контент внутри прокручиваемой области имеет правило CSS «float», iScroll не сможет определить высоту контента,iScroll будет думать, что прокручивать нечего.Поэтому вам может потребоваться проверить правила CSS, применяемые к прокручиваемому контенту.
• jQuery Mobile автоматически связывает событие касания с некоторыми элементами.При объединении iScroll с jQuery Mobile было бы неплохо связать отдельную функцию с событием 'touchmove' и предотвратить всплывающее событие (event.preventDefault ()).Благодаря этому jQuery Mobile не сможет обрабатывать событие касания, пока пользователи взаимодействуют с элементом iScroll.

Это общая рекомендация, но я надеюсь, что они могут вам помочь.Я написал небольшое расширение jQuery для интеграции jQuery с iScroll.Вы можете получить его по адресу:

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

Answer 2

В приложении на основе HTML5 плавная прокрутка всегда сопряжена с трудностями.Существуют сторонние библиотеки для реализации плавной прокрутки, но реализация очень сложная.В этой библиотеке скроллера пользователю нужно всего лишь добавить атрибут scrollable = true в раздел прокрутки, тогда этот div будет прокручиваться как плавный собственный скроллер.Пожалуйста, сначала прочитайте файл readme.doc, чтобы начать работу над ним

ссылка на библиотеку

http://github.com/ashvin777/html5

Преимущества: 1 Нет необходимости создавать объект скроллера вручную.2 Scroller будет автоматически обновляться в случае изменения каких-либо данных в скроллере.3 Так что не нужно обновлять вручную.4 Вложенная прокрутка контента также возможна без двойной прокрутки.5 Работает для всех движков webkit.6 Если пользователь хочет получить доступ к этому объекту скроллера, он может получить к нему доступ, написав «SElement.scrollable_wrapper».scrollable_wrapper - это идентификатор прокручиваемого подразделения, определенного на html-странице.

Answer 3

Я копаю глубже в документации по iScroll и обнаружил, что мне нужно обновлять объект iscroll каждый раз, когда DOM изменяется.Это необходимо, потому что после изменений необходимо пересчитать фактическую высоту / ширину.

Я должен был просто изучить Objective-C ... пытаться создавать приложения с использованием HTML просто слишком сложно ... по крайней меретеперь.