ui-同じデータソースを使用して2つのテーブルをスクロールし、両方のテーブルを同期してスクロールします

debugcn 投稿 Dev

アルシナワズ

アプリケーションでui-scrollを使用していますが、いくつかの問題が発生しました。

2つのテーブルの作成に使用したのと同じデータソースでui-scrollを実行したいのですが、一方のテーブルをスクロールすると、同じデータソースを介して作成されたもう一方のテーブルもスクロールするはずです。

次のサンプルコードを使用してそれを達成しようとしましたが、機能しません。

テーブルのいずれかをスクロールすると、リストの動作がおかしくなります。リストのサイズが大きくなり、空の行が表示されます。付属のプランカーで確認できます。

また、データを変更すると、最初のテーブルにのみ影響し、2番目のテーブルはリストを更新しません。

また、同期をとることができません（誰かが助けてくれるなら、愚かな質問で申し訳ありません）。

これが私がしている方法です：

テンプレート：

<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が一部のスクロール計算に追加する最初と最後の行の高さが100pxを超える傾向があります。それらに取り組む方法は？それらを非表示にすることはできますか？

これがどのように見えるかを示す写真です：

ディルト

これらのテンプレートのdisplaycss-propertyに問題があり、両方のビューポートを別々のdiv-containerに抽出することをお勧めします...次のコードは空の行の問題を修正します。

<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です。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]