1

我在我的应用程序中使用ui-scroll并遇到了一些问题。

我想在用于构建两个表的同一数据源上运行 ui-scroll,并且通过滚动一个表,它还应该滚动通过同一数据源创建的另一个表。

我试图使用以下示例代码来实现这一点,但它不起作用。

滚动任何表格时,列表的行为很奇怪;它会增加列表的大小并显示空行。它可以在附加的 plunker 中注意到。

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

我也无法进行同步(如果有人可以提供帮助,我很抱歉这个愚蠢的问题)。

这是我的做法:

模板:

<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

任何帮助将不胜感激。TIA

当滚动太快时,ui-scroll 为某些滚动计算添加的第一行和最后一行的高度往往大于 100 像素。如何解决它们?我可以隐藏它们吗?

这是显示它的外观的图片: 在此处输入图像描述

4

1 回答 1

1

在这些模板中显示 css-property 出现问题,将两个视口提取到单独的 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


关于 2 个视口滚动同步,我想,以下方法可能有效:

$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”是视口的ID。

于 2018-10-24T21:39:52.383 回答