如何在AngularJS的无限滚动中实现返回按钮？

Question

我正在使用AngularJS构建一个应用程序，由于需要展示大量的物品，因此我已经实现了无限滚动技术，这比分页更好。但不好的一点是，如果用户点击某个物品进入其详细页面，当用户返回时，将回到顶部，需要重新向下滚动。我的目标是，当用户点击“后退”按钮时，可以回到他之前浏览的位置！

展示物品：

<div class="container" id="infinit-container" ng-controller="ArticlesController">

    <div id="fixed" when-scrolled="LoadMore()">
        <div ng-repeat="article in Articles">
            <article-post article="article"></article-post>
        </div>
    </div>
</div>

这里是when-scrolled指令

app.directive('whenScrolled', function () {
return function (scope, element, attrs) {
    $('#fixed').height($(window).height());
        var div = element[0];
        element.bind('scroll', function () {
            if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
                scope.$apply(attrs.whenScrolled);

            }
        })
    }
})

那是控制器。

app.controller('ArticlesController', function ($scope, UserService) {
  $scope.Articles = [];

  var page = 0;
  $scope.LoadMore = function () {
    UserService.Articles(page)
      .success(function (data) {
        $scope.Articles.push.apply($scope.Articles, data);
      });
    page++;

  };
  $scope.LoadMore();
});

- Iliyass Hamza

---

你的滚动条是双向的吗？ - Dayan Moreno Leon

当你加载更多文章时，我会将页面编号放入哈希路径中。然后，在加载无限滚动页面时，检查页面编号并加载到该页面为止的所有内容。如果您的滚动是双向的，则仅加载该页面，并在向上滚动时使您的代码加载先前的页面。 - Justin Ryder

我从未实现过无限滚动，但这是我认为我会做的方式。基本上，您需要将$routeParams和$location注入控制器，并将页面变量设置为$routeParams中的页面参数，而不是0。您的LoadMore函数需要知道它是向上还是向下滚动，以便相应地增加或减少页面。发生滚动时，您还需要使用当前用户滚动到的页面更新$location。 https://docs.angularjs.org/api/ngRoute/service/$routeParams https://docs.angularjs.org/api/ng/service/$location - Justin Ryder

最好的方法是缓存页面编号和已加载的项目，然后导航到详细页面。返回时，如果存在缓存数据，则加载它。 - Muhammad Usman

@IliyassHamza - 有解决方案了吗？我非常好奇人们是如何解决这个问题的。存储页面编号和其他信息运行良好，但如果有一个需要加载的大列表，并且在跳回正确项目之前出现暂停怎么办？这是我们必须处理的事情吗？ - karns

Answer 1

我正在使用页面编号，在查看项目详细信息时将页面编号保存在某个地方（我更喜欢使用sessionStorage），当用户返回列表时，读取页面编号并加载页面。

这是主页控制器（列表）的简单代码。

app.controller('ArticlesController', function($scope, UserService) {
    $scope.Articles = [];

    var page = 0;
    $scope.LoadMore = function() {
        UserService.Articles(page)
            .success(function(data) {
                $scope.Articles.push.apply($scope.Articles, data);
            });
        page++;

    }

    $scope.LoadArticle = function(articleId) {
        sessionStorage.setItem("pageNumber", page);

        /// change path to somewhere you want show your article
    };


    //it will load the page you coming back from
    if (sessionStorage["pageNumber"]) {
        page = parseInt(sessionStorage["pageNumber"]);
    }
    LoadMore();
});

由于使用sessionStorage，如果用户按预期关闭浏览器或页面，它将被删除。

- Ashkan Nourzadeh