Angular滾動到底部自動加載

時間 2019-11-12

原文原文鏈接

ngInfiniteScroll 是用於 AngularJS的無限滾動控件，特色是簡單易用，是AngularJS應用最爲普遍的」觸底加載」控件。javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='js/jquery.min.js'></script>
    <script type='text/javascript' src='js/angular.min.js'></script>
    <script type='text/javascript' src='js/ng-infinite-scroll.min.js'></script>
    <style>
        [ng-cloak] {
            display: none;
        }
        .bottom {
            text-align: center;
        }
        img{
            width: 100px;
        }
    </style>
    <title>Angular滾動到底部自動加載</title>
</head>

<body ng-app="scrollApp">
    <div ng-controller='scrollController' ng-cloak>
        <div infinite-scroll='nextPage()' infinite-scroll-disabled='isData' infinite-scroll-distance='0'>
            <div ng-repeat='item in items'>
                <p>
                    <span>{{item.title}}</span>
                    <span>{{item.totalCount}}</span>
                    <span>{{item.weekCount}}</span>
                </p>
            </div>
            <div ng-show='busy && !isData' class="bottom">
                <img src="img/loading1.gif" alt="">
            </div>
            <div ng-show='isData' class="bottom">已經到底了</div>
        </div>
    </div>
    <script>
        var scrollAppModule = angular.module('scrollApp', ['infinite-scroll']);

        scrollAppModule.controller('scrollController', function ($scope) {
            $scope.items = [];
            $scope.busy = false;
            $scope.page = 0;
            $scope.isData = false;
            $scope.nextPage = function () {
                if ($scope.busy) return;
                $scope.busy = true;
                var url = "/api/history/list?sort=1?size=10&start=" + $scope.page * 10;
                $.ajax({
                    url: url,
                    method: 'GET',
                    contentType: 'text/plain;charset=utf-8',
                    success: function (res) {
                        var items = res.obj;
                        if (items.length < 10) {
                            $scope.isData = true;
                        }
                        for (var i = 0; i < items.length; i++) {
                            $scope.items.push(items[i]);
                        }
                        $scope.$apply(function () {
                            $scope.items = $scope.items;
                            $scope.busy = false;

　　　　　　　　　　　　　　})  
　　　　　　　　　　　　　　$scope.page += 1; 
　　　　　　　　　　　　} 
　　　　　　　　　　}); 
　　　　　　　　} 
　　　　　　}); 
　　</script> 
</body>

 </html>

注意：不要把ng-repeat和infinite-scroll放在同一個標籤內html

1. jquery.min.js下載地址：http://www.bootcdn.cn/jquery/java

2. angular.min.js下載地址：http://www.bootcdn.cn/angular.js/jquery

3. ng-infinite-scroll.min.js下載地址：http://sroze.github.io/ngInfiniteScroll/git

其餘關於ngInfiniteScroll 的實例：http://sroze.github.io/ngInfiniteScroll/demo_async.htmlgithub

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。