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

刺骨的言语ヽ痛彻心扉 2022-05-17 12:18 172阅读 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>

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220517/69d3a2439d8e4ae291800f6b19207fba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220517/88903d94f2094833bc022817e831893c.png