如何使用md-virtual-repeat实现双向无限滚动？

Question

如何使用md-virtual-repeat实现双向无限滚动？

angularjsangularjs-ng-repeatinfinite-scrollangularjs-material

7

我已经实现了一个使用md-virtual-repeat的无限水平滚动。每当我向右滚动时，它会在需要时获取25条记录。

<md-virtual-repeat-container flex md-orient-horizontal>
  <div md-virtual-repeat="item in $ctrl.infiniteItems" md-on-demand>
    {{ item.date }}
  </div>
</md-virtual-repeat-container>

基本上，它是一个水平的日期列表（带有其他信息），您可以在其中滚动。您可以滚动到未来的日期。运作良好。

现在，我还想向左滚动，以查看过去的日期。

我正在寻找一种从中间开始的方法（即今天的日期）。我尝试通过控制器设置md-top-index的值，但在从服务器获取第一页后，它会被重置为较低的数字。

<md-virtual-repeat-container flex md-orient-horizontal md-top-index="$ctrl.topIndex">
  <div md-virtual-repeat="item in $ctrl.infiniteItems" md-on-demand>
    {{ item.date }}
  </div>
</md-virtual-repeat-container>

我该如何配置md-virtual-repeat-container和md-virtual-repeat，以允许向左和向右滚动？

更新：这里有一个Codepen的沙盒，展示了我想通过一个按钮向左滚动的情况。 https://codepen.io/christiaanwesterbeek/pen/pLRQgg 更新2：将md-top-index设置为某个正整数可以实现双向滚动。但是，Angular Material网站上给出的带有md-top-index的示例并不是关于无限滚动的。我的问题的解决方案在于md-top-index与无限滚动相遇的地方。

- Christiaan Westerbeek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Taki · Answer 1

好的，回答你的问题：

你可以通过将你的html文档中的body标签更改为<body dir="rtl">来允许在md-virtual-repeat中反向滚动。

简单来说：

我到处寻找这个答案，但是我找不到任何东西，我想你也是一样，所以我从angular cdn下载了angular-material.js本地文件，看看他们如何处理这个问题，以下是代码片段：

VirtualRepeatContainerController.prototype.handleScroll_ = function() {
  var ltr = document.dir != 'rtl' && document.body.dir != 'rtl';
  if(!ltr && !this.maxSize) {
    this.scroller.scrollLeft = this.scrollSize;
    this.maxSize = this.scroller.scrollLeft;
  }
  var offset = this.isHorizontal() ?
      (ltr?this.scroller.scrollLeft : this.maxSize - this.scroller.scrollLeft)
      : this.scroller.scrollTop;

  if (offset === this.scrollOffset || offset > this.scrollSize - this.size) return;

  var itemSize = this.repeater.getItemSize();
  if (!itemSize) return;

  var numItems = Math.max(0, Math.floor(offset / itemSize) - NUM_EXTRA);

  var transform = (this.isHorizontal() ? 'translateX(' : 'translateY(') +
      (!this.isHorizontal() || ltr ? (numItems * itemSize) : - (numItems * itemSize))  + 'px)';

  this.scrollOffset = offset;
  this.offsetter.style.webkitTransform = transform;
  this.offsetter.style.transform = transform;

  if (this.bindTopIndex) {
    var topIndex = Math.floor(offset / itemSize);
    if (topIndex !== this.topIndex && topIndex < this.repeater.getItemCount()) {
      this.topIndex = topIndex;
      this.bindTopIndex.assign(this.$scope, topIndex);
      if (!this.$rootScope.$$phase) this.$scope.$digest();
    }
  }

  this.repeater.containerUpdated();
};

这就是我发现他们依赖于身体方向来指导无限滚动的方式，所以如果您不想改变您的html文档方向，您将不得不下载它，编辑此部分并使用它来代替cdn，但是...它不能按预期工作；

在正常情况下，从左到右滚动将增加this.scrollLeft变量，并且正如您在片段中看到的那样，它被用于各处，它将增加offset和translateX()，所有内容都将落入正确的位置，

但是，如果您从右向左滚动，handleScroll_函数将把this.scrollOfsset设置为视图的宽度，并且当您向左滚动时，this.scrollLeft将减少而不是增加，一旦您到达您的前25个的末尾，一切都将分崩离析，

我尝试通过console.log所有变量并将rtl与ltr进行比较，以查看何时何地出现问题。我尝试围绕值和操作进行实验，但没有成功。你也可以尝试实验，也许我错过了什么（但嘿，问题只是关于改变方向，对吧？：P）

我建议你尝试其他东西（就像上面的评论中提到的那些）

我希望这可以帮助你或者至少给你一个想法，祝你好运。

编辑：

由于这取决于body的方向，因此您只能向左或向右滚动，不能同时进行，即使您设置了md-top-index并从中间开始（使用dir =“ltr”），您只会在一侧（向右）拥有无限滚动，如果您返回，它只会显示已加载的旧数据。

您可以查看js文件中的VirtualRepeatController.prototype.virtualRepeatUpdate_，以了解如何添加新块并更新索引和滚动。

顺便说一下：人们想要这个功能是为了反向垂直滚动（用于聊天应用程序），虽然有未解决的问题，但由于他们转向了 Angular 2.x 及以上版本，因此不太可能添加。

底线是：如果您想要在仅使用配置的情况下在两侧滚动，恐怕是不可能的，如果您绝对需要此功能，则需要修改 angular-material.js 来适应您的需求。