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

Question

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

0

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

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

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

Приветствия

ronanray 24 сен. 2011, в 11:36

Источник

Теги:

jquery

cordova

jquery-mobile

3 ответа

Ещё вопросы

appcropolis · Answer 1 · 2012-02-23T04-35-00.000Z

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

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

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

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

Ashvin777 · Answer 2 · 2012-12-21T02-56-00.000Z

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

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

http://github.com/ashvin777/html5

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

ronanray · Answer 3 · 2011-09-25T09-41-00.000Z

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

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

Чтобы сделать тонкий Ronranray сказал: определить глобальную переменную myScroll, а затем вызвать ее через myScroll.refresh ()