angularJS-滚动到底部加载数据实现分页 --- 通过指令实现

最新推荐文章于 2021-08-06 09:40:02 发布

极地雪狼li

最新推荐文章于 2021-08-06 09:40:02 发布

阅读量2.3k

点赞数

分类专栏： web前端 ionic 文章标签： angular directive

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/xuehu837769474/article/details/81586074

版权

web前端同时被 2 个专栏收录

53 篇文章 20 订阅

订阅专栏

ionic

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="myPro">
<head>
    <meta charset="UTF-8">
    <title>angularJS-滚动到底部触发事件</title>
    <script src="https://cdn.bootcss.com/angular.js/1.0.8/angular.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ol, ul {
            list-style: none;
        }

        .box {
            width: 500px;
            height: 500px;
            border: 1px solid gray;
            margin: 100px auto;
            overflow-y: auto;
        }

        .box ul {
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid gainsboro;
        }

        .box ul li {
            float: left;
            width: 33.3%;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<body ng-controller="myProController">
<div class="box" when-scrolled="loadMore()">
    <ul ng-repeat="data in users">
        <li>{{data.name}}</li>
        <li>{{data.age}}</li>
        <li>{{data.address}}</li>
    </ul>
</div>
</body>
<script>
    var pro = angular.module ("myPro", []);
    pro.controller ("myProController", [ "$scope", function ( $scope ) {
        $scope.users = [
            { "name": "zhangsan1", "age": "1", "address": "北京" },
            { "name": "zhangsan2", "age": "2", "address": "北京" },
            { "name": "zhangsan3", "age": "3", "address": "北京" },
            { "name": "zhangsan4", "age": "4", "address": "北京" },
            { "name": "zhangsan5", "age": "5", "address": "北京" },
            { "name": "zhangsan6", "age": "6", "address": "北京" },
            { "name": "zhangsan7", "age": "7", "address": "北京" },
            { "name": "zhangsan8", "age": "8", "address": "北京" }
        ];

        //滚动到底部触发事件
        var pageSize = 0;
        $scope.loadMore = function () {
            pageSize++;
            var obj ={ "name": "zhangsan18", "age": "18", "address": "北京" };
            for(var i = 0; i < pageSize; i++){
                obj.age = i;
                $scope.users.push(obj)
            }
            console.log ("到底啦!!");
            console.info(pageSize);
        };
    } ]);

    //滚动指令
    pro.directive ('whenScrolled', function () {
        return function ( scope, elm, attr ) {
            // 内层DIV的滚动加载
            var raw = elm[ 0 ];
            elm.bind ('scroll', function () {
                if ( raw.scrollTop + raw.offsetHeight >= raw.scrollHeight ) {
                    scope.$apply (attr.whenScrolled);
                }
            });
        };
    });
</script>
</html>