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

How to implement back button in Infinite Scrolling in AngularJs?

本文关键字：按钮 滚动 实现 AngularJs 无限      更新时间：2023-09-26

我正在用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- scrolling指令

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

我使用页码，保存页码的地方(我更喜欢sessionStorage)当去看项目的详细信息，当用户回到列表，读取页码和加载页面。

是主页控制器(list)的简单代码

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

相关文章：