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();
});

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，如果用户按预期关闭浏览器或页面，它将被删除。

如何在AngularJs中的无限滚动中实现后退按钮？

1 个答案: