20

コメントに関する以下の解決策。

問題: 私の loadMore() メソッドは、すべてのコンテナのスクロールで実行されます。

意味: loadMore() は、親コンテナーの各マウス スクロールで実行されます ( infinite-scroll-parent="true")

望ましい結果: loadMore() を取得するには、infiniteScrollDistance が条件を満たしている場合にのみ実行します。

私のコードは、 demo_basicとdemo_asyncに非常にインスパイアされています。

私のアプリは写真ギャラリーです。写真を ajax 呼び出しで読み込み、サムネイル ディレクティブ リピーターに入力します。コントローラーの初期化時に ng-Infinite-Scroll を無効にし、コールバックの成功時に有効にします。

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll='loadMore()' 
                    infinite-scroll-disabled='album.busy' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance='2'>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

私のコーヒーコードには驚きはありません。単純なconsole.logを配置すると、問題がまだ発生するため、ロジックは重要ではありません.....

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log('loadMore() been executed here')

私のサムネイルディレクティブは同じです。当然のことながら、最後の写真がリピーターに取り込まれた瞬間に、コンポーネントを有効にします。

    app.directive 'myPhotoDirective', ['$window', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

何が欠けているのか、間違っているのかわかりません。誰かが私を助けてくれることを願っています。

ありがとうございました。

4

7 に答える 7

17

実際のコードを表示するためのプランカーがなければ、ngInfiniteScroll の FAQ に直接誘導します。

ngInfiniteScroll がすべてのスクロール イベントで式をトリガーするのはなぜですか?

infiniteScroll ディレクティブは、それがアタッチされている要素の高さを使用して、ウィンドウの下部にどれだけ近いかを判断します。場合によっては、ブラウザーが高さ 0 を報告することがあり、これが原因でこの動作が発生します。通常、これはコンテナ要素にフローティングの子のみが含まれていることが原因です。この問題を解決する最も簡単な方法は、コンテナーの下部に「スペーサー」要素を追加することです (のようなもの<div style='clear: both;'></div>)です。詳細については、この StackOverflow の質問とそれに関連する回答を参照してください。

于 2014-05-19T14:44:40.703 に答える
5

私は自分の問題を解決しました。

NIS ( ngInfiniteScroll ) が測定する基本プロパティの 1 つは$container、$elem

  1. $containerscrolled elements Element の親です。
  2. $elemスクロールされた要素を含む Element です。

例

<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>

NIS がやろうとしているのは、マウスのスクロールごとに計算し (有効な場合)、これら 2 つの要素間の関係を計算し、$elemが よりも高いかどうかを確認$containerし、下にスクロールするかどうかを確認することです。（距離、即時チェック、無効などの他のプロパティもチェックします）。

したがって、この 2 つの基本要素間のこの関係は、NIS の理解とデバッグにとって非常に重要です。

だから私の問題はまさにそれでした - $container と $elem は高さが同じでした。
両方の要素で css の高さの値 (100%) を修正しました (主にドキュメントで高さを渡さなければならないことが原因です) $elem。

第二infinite-scroll-distanceに、これも同様に発生する可能性があります。設定している値が高く (2 としましょう)、loadMore()メソッドのランタイムを無効にしても、メソッドが十分な項目を設定しない場合、無限にloadmore()実行されます。

于 2014-05-21T14:54:55.190 に答える
1

それを理解するためだけに多くの時間を費やしてください。私にとって、無限スクロールのメソッドは無限に呼び出されたので、少し調査を行ったところ、コード内の無限スクロールの「div」の高さが 0 であり、まったく増加していなかったために発生しているという結論に達しました。ユーザーがページの最後にいると常に考えていました。したがって、私にとっての解決策は、無限スクロールのために「div」の次の要素に「clearfix」html クラスを追加することでした。

于 2016-01-14T11:17:40.407 に答える
1

これは当たり前のように思えるかもしれませんが、それは 1 日私を回避しました。

NIS のホームページの画像に示されている例に従いました。

ここに画像の説明を入力

注意すべき重要な部分は、スクロール距離です。

infinite-scroll-distance="3"

ドキュメントによると、

ブラウザー ウィンドウの高さが 1000 ピクセルで、infinite-scroll-distance が 2 に設定されている場合、無限スクロール式は、要素の下部がブラウザー ウィンドウの下部から 2000 ピクセル以内にあるときに評価されます。デフォルトは 0 です (たとえば、式は要素の下部がブラウザ ウィンドウの下部と交差するときに評価されます)。

開発中、表示される項目は 50 個までで、NIS が無限に発火していると思いましたが、間違っていました。実際、4000 ピクセルまで埋めようとしていただけです。

TL;DR: 設定している場合は、infinite-scroll-distance を削除 (または少なくとも削減) します。

于 2015-11-19T19:53:15.667 に答える
0

同様の問題がありましたが、コンテナーの最後に到達するまでに無限スクロールがロードを停止することさえありませんでした (v1.2 の∞-scroll-container オプションを使用しました)。長いデバッグの後、コンテナーの高さがフロート (たとえば 634.245px) であるのに対し、内部要素の高さはそれに近いが、int (たとえば 635px) であることに気付きました。到達しました。ng-infinite-scroll の問題は、視覚的であり、実際のデータを処理しないことです。そのため、バックエンドから返されたデータを確認し、結果が空の場合はブロックする必要がありました (infinite-scroll-disabled 関連関数)。

于 2015-04-21T15:22:48.447 に答える
0

nginfinitescroll が機能するには、html 形式がこのようなものである必要があることがわかりました。高さが固定されたダミーの外部divを追加すると、問題が解決しました

<div style="height:500px;">
   <div  infinite-scroll="myPagingFunction()">
     <div  ng-repeat="x in images"></div>
   </div>
</div>

それが誰かに役立つことを願っています。

于 2015-06-03T15:35:49.153 に答える