虛擬滾動 - 沒有Ajax

我一直在各種'無限滾動'的解決方案，讓用戶滾動瀏覽您的網站上的數據或圖像，並循環數據回到開始或加載位，因爲他們通過進展。例如，在選擇框，如：虛擬滾動 - 沒有Ajax

http://ivaynberg.github.com/select2/

我所試圖做的是類似的東西，但我已經有200多個記錄的完整數據集的陣列每一個我呈現出進入列表項。每次只有5個列表項適合屏幕內容，所以每當我達到該設置的結尾時，下一組已經在那裏等待滾動（使用觸摸/鼠標事件）。

我試過在每個數據集中添加/預先設置元素，但這在移動設備上非常慢。我接下來嘗試的是這樣的：

1）創建一些佔位符。

2）當佔位符滾出視覺邊界時，將它們推回到其初始位置（使用新數據），創建無縫滾動的幻覺。

3）從盒子的位置找出一個頁面索引來抓取數據。用新數據重新填充所有佔位符。

在觸摸/鼠標移動事件處理程序：

ondrag: function(e) { 
    var top, row, rows, delta = 1, prefix; 

    if(e.direction === 'up') { 
    e.distance = e.distance * -1; 
    } 

    rows = Math.floor(this._grid.scrollHeight/this._grid.ticketHeight); 

    // Use a simpler row-snap rule. 
    top = (this._previous.top + e.distance) * delta; // Top offset. 
    row = Math.floor(top/this.rowHeight); // Row position. 

    // Makes the scroll infinite by seamlessly bouncing back. 
    if(Math.abs(row) > rows) {     
    top = (e.distance * delta);   
    } 

    elems = this.$el.find('.ticketRow'); 
    for(i = 0; i < elems.length; i++) { 
    elems[i].style.webkitTransform = 'translate(0px,' + ((i * this.rowHeight) + top) + 'px)';  
    } 

    if(this._offset !== Math.abs(row)) { 
    this._offset = Math.abs(row); 

    if(e.direction == 'down') { 
     this._track--; 
    } else { 
     this._track++; 
    } 
    // Get new data from data source and apply it to the place holders. 
    this.update(this._track); 
    } 
},

然而，這將創建一個討厭的彈跳/風聲鶴唳的效果。我也嘗試將每行的新位置設置爲移動距離的倍數，但我仍然得到相當不穩定的結果。

我的問題是，我正確接近這個嗎？有沒有什麼能爲我做到這一點？更好的是，上面的數學缺陷在哪裏？

任何幫助表示讚賞！

注意：我使用hammer.js來捕獲我的觸摸手勢。

來源

2012-08-01 backdesk

https://github.com/mleibman/SlickGrid/wiki/ 看起來不錯，但我不是在一個excel風格的網格後。 – backdesk 2012-08-01 20:22:01

+1！尋找在移動設備上顯示大量結果的列表視圖基本相同的事情。 – 2013-02-20 19:29:30

我有這個問題的解決方案。它基本上是一個簡化/垂直版本：http://cubiq.org/swipeview – backdesk 2013-03-01 05:52:50

您是否嘗試過將所有項目設置爲display: none，初始狀態顯示前五項，然後使用scrollPosition將顯示設置爲block？

來源

2013-03-21 21:32:05 Robert

虛擬滾動 - 沒有Ajax

回答

相關問題