jQuery Mobile的滾動型

所以我想做一個滾動列表：jQuery Mobile的滾動型

<div data-role="content-primary" class="list" style="height:100%; overflow:scroll" data-scroll="y"> 
    <ul data-role="listview" id="mainList" > 
     <asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static"> 
      <ItemTemplate> 
       <li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)"> 
        <div id="divPic" runat="server" class="pic"> 
         <h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2> 
         <p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p> 
         <input type="hidden" Id="brand" runat="server"/> 
         <input type="hidden" Id="cat" runat="server"/> 
        </div> 
       </li> 
      </ItemTemplate> 
     </asp:Repeater> 
    </ul> 
</div>

封閉在：< .section僞類= 「ex_list」風格=「浮動：權利;寬度：70％;溢出：隱藏「>標籤

我使用以下腳本：

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

除了jqm和jq。問題是，在電腦上滾動不起作用（但它並沒有那麼糟糕），但在iPad上整個網站正在滾動除了列表視圖。用戶也可以滾動瀏覽網站，看到灰色的BG，直到Safari瀏覽器停止滾動。

編輯：另外，這些2周JS的使 'toggleClass（）' jQuery函數無法正常工作。

來源

2011-08-31 Rufix

和你期待的結果是什麼？ – JamesHalsall

除了工作'toggleClass（）'函數，以及我希望只有listview是可滾動的。或者如果整個頁面應該是可滾動的，至少它不應該在頁面上方滾動，顯示灰色背景......您可能已經注意到它是ASP控件的一部分，Master Page沒有像數據滾動一樣，但它滾動：'（ – Rufix

我剛剛在android（2.2和3.2）和iphone（不是ipad）上執行此操作以使scrollview正常工作，您需要包括css文件和jquery easing腳本。

腳本必須被包括在該順序：

jquery的
jquery.mobile
jquery.easing
jquery.mobile.scrollview
滾動視圖

的css文件給你滾動條，jquery.easing giv es平滑的動畫（一個令人印象深刻的項目本身），jquery.mobile.scrollview做了繁重的工作，scrollview刮除了頁面併爲scrollview接管了足夠的標記。

我確定我不需要告訴你，這是'實驗性'的原因（在滾動瀏覽列表視圖時奇怪的行爲，它也打破了點擊按鈕和鉻瀏覽器文本區域的能力 - 我還沒有測試過其他瀏覽器），但是我發現它在移動設備上的問題很少。我非常喜歡它，它使我能夠始終將頁面頂部保留在頁面頂部。嵌套許多滾動視圖也非常酷。

我不能說我已經注意到與toggleClass功能的任何問題，但是可能有一些做與滾動型經歷和添加標記。

注：爲最新版本的jQuery移動RC2的，按鈕和文本輸入應該工作。

EDIT

在jQuery移動1.1.0的，它是recommended使用data-position="fixed"屬性在頁眉（或頁腳）使用fixed headers和完全除去滾動視圖。

我已經嘗試過這個自己和它的效果要好得多（針對Android 2.2+和iOS5的 - 黑莓OS不是我測試過，但博客聲稱，它應該BB7工作）。它比js解決方案運行得更快，更平滑，並且具有更少的圖形錯誤。請務必刪除所有額外的js，css和所有對data-scroll的引用，因爲它會干擾/破壞所有內容。

對於不受支持的版本和操作系統，您可能仍然需要scrollview js/css等，但根據我的經驗，不支持固定標頭的地方太慢而無法運行js版本。

來源

2011-09-20 05:27:26 CoatedMoose

我在我的碩士論文中也用可滾動的列表視圖來構造，我嘗試了你提供的鏈接，但它們似乎不再工作，你能幫我解決這個問題嗎？ jQuery Mobile Library，但似乎scrollview沒有記錄在任何地方，我試圖用框架來解決它，但這不起作用 – NicTesla

嘗試查看編輯中的鏈接使用最新版本的jqm，你應該需要做的是在頁眉或頁腳中使用'data-position ='fixed''屬性來防止它滾動內容。 – CoatedMoose

這就是我所做的和它的工作。但我想知道是否有可能使用幀。BR – NicTesla

尼斯線程這裏，想貢獻一個小紙條：更重要的是

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

另外：

如果你喜歡Safari中的灰色地帶，滾動時的jQuery移動頁面消失，你可以使用，這將使您能夠更高效地處理脫機數據庫，因爲UI（touchmove事件）通常會中斷移動設備上的SqlLite數據庫功能，從而避免中斷。

來源

2012-03-08 18:53:36 Nader

這將禁止水平和垂直滾動。我想這不是一個好習慣。 –

jQuery Mobile的滾動型

回答

相關問題