Angular滚动到底部自动加载

ngInfiniteScroll 是用于 AngularJS的无限滚动控件,特点是简单易用,是AngularJS应用最为广泛的”触底加载”控件。使用方法如下:


<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?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下载地址:https://www.bootcdn.cn/ngInfiniteScroll/

你可能感兴趣的:(Angular1)