jQuery Mobile和iScroll问题

Question

因此，我找到了一个很好的解决方案，用于解决jcoll mobile（即iscoll库）中固定的页眉和页脚问题。 为了使iscroll库与jquery mobile一起使用，我使用了以下第三方脚本： https : //github.com/yappo/javascript-jquery.mobile.iscroll

一切对于我的列表页面都很好（使用jquery移动列表视图）。 我的列表页面是使用ajax动态加载的。 但是，当我创建一个应该滚动的产品详细信息页面时，它根本不起作用。 在某些情况下，我根本无法滚动。 在其他情况下，滚动的行为就像橡皮筋效果一样，它总是使您再次回到顶部。 但是，页眉和页脚导航栏固定为我想要的样子。

所以，这是场景。 我有一个列表页面（带有滚动），当您单击任何列表项时，您应该在其他页面上看到产品详细信息。 正如您在yappo包装器脚本中看到的那样，iscroll在pagebeforeshow事件上触发。 这是我的产品详细信息页面的模板。 内容将被动态加载并附加到滚动条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（））是一个好主意。 这样，当用户与iScroll元素进行交互时，jQuery Mobile将无法处理触摸事件。

这是一般性建议，但希望它们能为您提供帮助。 我写了一个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如果滚动条中的任何数据被更改，滚动条将自动刷新。 3因此，无需手动刷新。 4嵌套滚动内容也可以，没有双重滚动问题。 5适用于所有Webkit引擎。 6如果用户要访问该滚动对象，则可以通过编写“ SElement.scrollable_wrapper”来访问它。 scrollable_wrapper是html页面中定义的可滚动分区的ID。

Answer 3

我深入研究了iScroll文档，发现每次DOM更改时都需要刷新iscroll对象。 这是必需的，因为它需要在更改后重新计算实际的高度/宽度。

我应该只学习Objective-C ...试图至少使用HTML来构建应用程序非常麻烦。