3

我一直在网上寻找各种“无限滚动”解决方案，这些解决方案让用户滚动浏览您网站上的数据或图像，然后将数据循环回开始或在它们进行时加载位。例如在一个选择框中，如：

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来捕捉我的触摸手势。

4

1 回答 1

0

您是否尝试过将所有项目设置为display: none并在初始化时显示前五个，然后仅将显示设置为block使用 scrollPosition？

于 2013-03-21T21:32:05.790 回答