angular點擊查看更多（簡單demo）

時間 2019-11-10

標籤 angular 點擊查看更多簡單 demo 欄目 AngularJS 简体版

原文原文鏈接

　　今天來跟你們分享一個小的demo，通常網頁瀏覽到底部的時候會有一個點擊加載更多的按鈕，以前一直糾結怎麼寫這個，今天學習angular時發現能夠用組件來實現這麼一個小的效果，你們有興趣的話能夠看一下。html

點擊加載更多，代碼以下：數組

<!DOCTYPE html>
<html ng-app="indexApp">//綁定模塊
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #fixed{
                height: 500px;
                overflow: auto;
            }
        </style>
        <script src="../js/angular.1.5.6.js"></script>//引入angular庫
        <script>
            var app = angular.module('indexApp',[]);//定義模塊
            app.controller('indexCtrl',['$scope',function($scope){//定義控制器
                $scope.items = ['a','b'];
                for(var i=0;i<=30;i++){
                    $scope.items.push(Math.random()*10);
                }
                $scope.loca = function(){
                    for(var j=0;j<=10;j++){
                        $scope.items.push(Math.random()*10);
                    }
                }
                
            }]);
            app.directive('ngScroll',function(){//組件
                return {
                    template:'<ul><li ng-repeat="item in items">{{item}}</li></ul>',
                }
            });
        </script>
    </head>
    <body>
        <div ng-controller="indexCtrl">
            <div id="fixed" ng-scroll=""></div><!--指令的方式-->
            <button ng-click="loca()">查看更多</button>
        </div>
    </body>
</html>滑動到底部自動加載：<!DOCTYPE html><html ng-app="loadMoreApp">    <head>        <meta charset="UTF-8">        <title></title>    </head>    <style>        #fixed {            height: 500px;            overflow: auto;/*溢出顯示滾動條*/        }    </style>    <body>        <div ng-controller="indexCtrl">            <div id="fixed" ng-scroll="loadMore()"><!--指令的方式-->                            </div>        </div>    </body>    <script src="js/angular.js"></script>    <script>        var app = angular.module('loadMoreApp', []);//定義一個模塊        app.controller('indexCtrl', ['$scope', function($scope) {//定義一個控制器            $scope.items = ['a', 'b'];            var i = 0;            for(; i <= 30; i++) {                $scope.items.push(Math.random() * 10);//生成隨機數，加到items這個數組後            }            $scope.loadMore = function() {                var j = 0;                for(; j <= 10; j++) {                    $scope.items.push(Math.random() * 10);                }            }                    }]);        //定義一個組件        app.directive('ngScroll', [function() {            return {                template: '<ul><li ng-repeat="item in items">{{item}}</li></ul>',                link: function(scope, ele, attr) {                    //                    console.log(ele);                    ele.bind('scroll', function(e) {//                        console.log("offsetHeight:" + e.target.offsetHeight)//                        console.log("scrollTop:" + e.target.scrollTop) //滾動的距離//                        console.log("scrollHeight" + e.target.scrollHeight)                        if(e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {                            console.log("你已經到底了")                            scope.$apply(attr.ngScroll);                        }                    })                }            }        }])    </script></html>

相關標籤/搜索

每日一句

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