2017-02-22 5 views
0

私は、angle-uiからui-scrollを使って作業しています(すばらしい仕事です、コンポーネントは素晴らしいです)。ビューポートの上部にあるui-scrollバッファスペース

ほとんどすべてがうまく機能します。私が下にスクロールすると、カスタムデータソースからデータがロードされます。しかし、上にスクロールすると、ビューポート内の空白が多くなります。

検査すると、ui-scrollはサブディビジョンを追加して高さを動的に設定しているように見えますが、何らかの理由でビューポートの上部までスクロールしても0に戻っていません。

これは、私のデータソースがデータを提供している方法と関係があります。私は負のインデックス付けの周りに私の頭をラップしていません。誰かが、標準のページネーションサービス(インデックス+オフセットなど)にマッピングするときに、datasource.get()関数の負のインデックスをどのように考慮する必要があるのか​​説明できますか?

答えて

0

申し訳ありませんが、これは解決策を見つけたと思います...私は本当に角度のUIチームによって提供されるデモで実際の例を見つけることができなかったので、これが他の人に役立つことを望みます。

負のインデックスを受け取ったときは、1)インデックスを0にクランプし、その差でカウント変数を調整する必要があります。

ここではいくつかのサンプルコードです:限られたデータ配列の場合は

dataSource.get = function (index, count, successCallback) 
    { 
     // Index provided is 1-based, we'll convert to 0-based and clamp at 0 
     var realIndex = Math.max(1, index) - 1; 

     if (index < 0) { 
      count -= 1 - index; 
     } 

     if (realIndex < 0 || 
      count == 0 || 
      realIndex >= vm.searchResultCount) 
     { 
      successCallback([]); 
      return; 
     } 

     ... 
     Make a pagination call to a service that expects the first 
     page of results to be at index 0. 
0

UI-スクロールデータソース実装がこの

var min = 1, max = 100; 
dataSource.get = function(index, count, success) { 
    var start = Math.max(min, index); 
    var end = Math.min(index + count - 1, max); 
    if (start <= end) { 
     getDataAsync(start, start + end + 1).then(success); 
    } 
    else { 
     success([]); 
    } 
}; 

のように見えることがありますが、これはあなたがminインデックスから始まるデータの配列を処理することができます。また、var end = index + count - 1経由で底面の制限を簡単に取り除くこともできます。

しかし、私はそれがバックエンドの責任であるかもしれないと言いたいと思います。このサンプルを見てください:https://rawgit.com/angular-ui/ui-scroll/master/demo/append/append.html - データ配列は1から50までの間で制限されていますが、データソースは(詳細はスキップしています)

関連する問題