jQuery Mobile和iScroll問題

因此，我找到了一個很好的解決方案來解決jquery mobile中iscoll庫中的固定頁眉和頁腳問題。爲了讓iscroll庫和jquery mobile一起工作，我使用了這個第三方腳本：https://github.com/yappo/javascript-jquery.mobile.iscroll jQuery Mobile和iScroll問題

對於我的列表頁面（使用jquery移動列表視圖），一切正常。我的列表頁面是使用ajax動態加載的。但是，當我創建一個應該滾動的產品詳細信息頁面時，它根本不起作用。在某些情況下，我根本無法滾動。在其他一些情況下，滾動的行爲就像橡皮筋效應一樣，它總是將您帶回到頂部。但是，頁眉和頁腳導航欄被固定爲我想要的。

所以，這裏是場景。我有一個列表頁面（滾動），當您點擊任何列表項目時，您應該在不同的頁面上看到產品詳細信息。在pagebeforeshow事件中觸發iscroll事件，就像您在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。

乾杯

來源

2011-09-24 ronanray

我深入挖掘iScroll文檔，我發現我需要刷新iscroll對象每次DOM的改變。這是必需的，因爲它需要重新計算更改後的實際高度/寬度。

我應該學習Objective-C ...嘗試使用HTML構建應用程序簡直太麻煩了..至少現在。

來源

2011-09-25 11:47:17 ronanray

做的瘦ronranray說：全局定義myScroll - 變量，然後通過myScroll.refresh（）調用它。 – zyrex

沒有看實際的應用程序很難告訴解決方案可能是什麼。在過去，我發現使用iScroll和jQuery Mobile的當以下問題：

如果滾動區域裏面的內容有CSS規則「浮動」 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/

來源

2012-02-23 07:05:32 appcropolis

在基於HTML5的應用，平滑滾動始終是具有挑戰性的。有第三方庫可用於實現平滑滾動，但實現非常複雜。在這個滾動庫中，用戶只需要在可滾動分區中添加scrollable = true屬性，那麼div就會像平滑的本地滾動條一樣滾動。請閱讀自述文件。doc文件最先開始工作

庫鏈接

http://github.com/ashvin777/html5

優點： 1無需手動創建滾動對象。 2滾動器會在滾動器中更改任何數據的情況下自動刷新。 3所以不需要手動刷新。 4嵌套滾動內容也可能沒有雙滾動問題。 5適用於所有webkit引擎。 6如果用戶想要訪問該滾動器對象，則可以通過編寫「SElement.scrollable_wrapper」來訪問它。 scrollable_wrapper是在html頁面中定義的可滾動分區的id。

來源

2012-12-21 05:06:17 Ashvin777

jQuery Mobile和iScroll問題

回答

相關問題