Question

Angular只需移动滚动条即可加载新页面。不到达底部时。它甚至在我向上滚动时加载新帖子。

app.factory('Recipes', function ($http) {
    var Recipes = function () {
        this.recipes = [];
        this.loading = false;
        this.page = 1;
    };

    Recipes.prototype.nextPage = function () {
        var url = 'api/recipes?page=' + this.page;
        if (this.loading) return;
        this.loading = true;
        $http.get(url)
            .success(function (data) {
                console.log(this.page);
                for (var i = 0; i < data.data.length; i++) {
                    this.recipes.push(data.data[i]);
                }
                this.page++;
                this.loading = false;
            }.bind(this));
    };

    return Recipes;
});

app.controller('RecipesCtrl', function ($scope, $http, Recipes) {
    $scope.recipes = new Recipes();
});

这是角度部分。这是laravel部分：

Route::group(['prefix' => 'api'], function () {
Route::get('recipes', [
    'as' => 'recipe.all',
    'uses' => 'RecipeController@recipes'
]);});

这是html部分：

<div ng-controller="RecipesCtrl">
    <div class="recipe row" infinite-scroll="recipes.nextPage()" infinite-scroll-distance="1"
         infinite-scroll-disabled='recipes.loading'>
        <div ng-repeat="recipe in recipes.recipes | orderBy:sortOrder:sortReverse | limitTo:myLimit">
            ...
        </div>
    </div>
</div>

Answer 1

第一个问题：为什么无限滚动会不断加载更多内容？

您的代码中

infinite-scroll-distance设置为1。这意味着当元素在浏览器底部的1000个像素内时，该指令将获取更多数据。

如果将此值更改为接近0的值，则用户必须进一步滚动才能激活触发器。

第二个问题：当没有更多内容要返回时，如何阻止指令加载更多内容？

停止指令不断加载更多数据的一种解决方案是在返回的数据为空时设置recipes.loading = true;。

因此：

.success(function (data) {
                console.log(this.page);
                for (var i = 0; i < data.data.length; i++) {
                    this.recipes.push(data.data[i]);
                }
                this.page++;
                this.loading = false;
                recipes.loading = true; // This should prevent more code from being loaded.
            }

角度和laravel infinte-scroll无法正常工作

1 个答案: