ui-使用相同的数据源并同步滚动两个表滚动两个表。

Question

我在应用程序中使用用户界面卷轴，遇到了一些问题。

我希望在同一个数据源上运行ui滚动，用于构建两个表，并且通过滚动一个表，它还应该滚动另一个表，该表是通过相同的数据源创建的。

我尝试使用下面的示例代码来实现这一点，但是它不起作用。

当滚动任何一个表时，列表的行为都很奇怪；它增加了列表的大小，并显示了空行。它可以注意到在柱塞所附。

如果我更改数据，它只会影响到第一个表，而第二个表不会更新列表。

另外，我也不能同步(如果有人能帮忙的话，很抱歉有这个愚蠢的问题)。

以下是我所做的事情：

模板：

<table border="1"> 
  <tbody>
    <td>
      <table> 
        <tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td> 
      <table>
        <tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tbody>
</table>

控制器：

var datasource = {};
datasource.get = function (index, count, success) {
    $timeout(function () {
        var result = [];
        for (var i = index; i <= index + count - 1; i++) {
            result.push("item #" + i);
        }
        success(result);
    }, 100);
};
$scope.datasource = datasource;

https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview

任何帮助都将不胜感激。提亚

当滚动速度过快时，用户界面滚动计算中添加的第一行和最后一行的高度往往大于100 ui。怎么对付他们？我能把它们藏起来吗？

下面的图片显示了它的外观：

​

Answer 1

在这些模板中显示css-属性是不合适的，将两个视图提取到单独的div容器中似乎是个好主意.以下代码修复了空行问题：

<table border="1"> 
  <tbody>
    <td>
      <div ui-scroll-viewport style="height: 400px;">
        <table> 
          <tbody id="first-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td> 
      <div ui-scroll-viewport style="height: 400px;">
        <table>
          <tbody id="second-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tbody>
</table>

更新后的演示程序如下：https://plnkr.co/edit/JjAiw3zvG4uIWGNjLUU7

对于两个视图端口滚动同步，我想，下面的方法可能会奏效：

$scope.datasource = {};
$scope.datasource.get = function (index, count, success) {
    var result = [];
    for (var i = index; i <= index + count - 1; i++) {
        result.push("item #" + i);
    }
    success(result); 
};

const vp1 = document.getElementById('vp1');
const vp2 = document.getElementById('vp2');
vp1.addEventListener('scroll', function() {
    vp2.scrollTop = vp1.scrollTop;
});

其中"vp1“和"vp2”是视图的ids。