zoukankan html css js c++ java

Angular滚动到底部自动加载

ngInfiniteScroll 是用于 AngularJS的无限滚动控件，特点是简单易用，是AngularJS应用最为广泛的”触底加载”控件。

<!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放在同一个标签内

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

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

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

其他关于ngInfiniteScroll 的实例：http://sroze.github.io/ngInfiniteScroll/demo_async.html

查看全文

相关阅读:
HTML5边玩边学（2）
Get Mac NetBIOS
NetBios协议详解及网上邻居工作原理
 DXperience Universal 10.1.6
HTML5边玩边学（1）
《UML和模式应用》读书笔记（二）
static instance examples
自己写的虚拟主机管理系统..和大家分享
 一个不错的net的User Interface Components
Infragistics系列控件

原文地址：https://www.cnblogs.com/-bingyan/p/8066919.html