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來構建應用程序非常麻煩。