今天来跟大家分享一个小的demo，一般网页浏览到底部的时候会有一个点击加载更多的按钮，之前一直纠结怎么写这个，今天学习angular时发现可以用组件来实现这么一个小的效果，大家有兴趣的话可以看一下。

点击加载更多，代码如下：

<!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>

angular点击查看更多（简单demo）的更多相关文章

  1. 利用ScrollView滑动属性实现点击查看更多

    利用ScrollView的滚动实现点击查看更多 效果图 更新内容布局 <ScrollView android:id="@+id/sv_des" android:layout_ ...

  2. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  3. jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

    从网上好了好久,没找到自己要的,自己写了一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. jQ-点击查看更多

    <style type="text/css"> .hi { width: 200px; height: 18vw; background-color: pink; fo ...

  5. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  6. Deferred在jQuery和Angular中的使用与简单实现

    Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...

  7. iOS中"查看更多/收起"功能实现

    实现效果如图: 查看更多功能在很多app种都有应用,在这里简单的实现,介绍实现流程: 一个tableViewCell中包含一个collectionView,"查看更多"按钮是tab ...

  8. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  9. jquery 点击显示更多

    点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...

随机推荐

  1. [Linux]Ubuntu与终端破墙

    参考:https://www.jianshu.com/p/941bf811f9c2 亲测在ubuntu-14.04.4-desktop-amd64.iso上安装成功 福利:https://github ...

  2. 如何能快速的成为一个年薪20万的Java程序员，你都需要具备哪些技术？史上最全的java学习路线！

    看好了,绝对不是单纯的初级视频,一个朋友在某机构学习,把每天老师讲课的视频代码和笔记全部整理出来了,需要的抓紧时间联系我! 一级目录截图   其中还包含时下最火的分布式和外服务的技术哦,请看07和08 ...

  3. mybatis中两种取值方式?谈谈Spring框架理解?

    1.mybatis中两种取值方式? 回答:Mybatis中取值方式有几种?各自区别是什么? Mybatis取值方式就是说在Mapper文件中获取service传过来的值的方法,总共有两种方式,通过 $ ...

  4. oracle 查看处理锁表

    --查出sid,serial#select b.username,b.sid,b.serial#,logon_time from v$locked_object a,v$session b where ...

  5. springboot security

    Authority    权限Credential    证书Grant    授予 Authentication 身份验证 以下,我们将通过四步,逐步实现spring-security的userna ...

  6. [转]NSIS 制作安装包无法创建桌面快捷方式或无法删除开始菜单项

    用户将桌面文件转移了,如: D:\Doc\Desktop  ,安装程序后,桌面不会生成快捷方式, 或者卸载后,开始菜单中的文件也不会被删除 NSIS卸载后无法删除开始菜单中的内容原因:因为NSIS中使 ...

  7. Multiple dex files define Lcom/google/gson/internal/Streams$AppendableWriter$CurrentWrite;

    开发中引入第三方 aar 时编译同过,运行时出现问题: Multiple dex files define Lcom/google/gson/internal/Streams$AppendableWr ...

  8. 在CentOS6.9 x86下编译libusb-1.0.22遇到的两个问题

    OS版本:CentOS 6.9 x86,内核版本2.6.32 问题一:configure.ac:36: error: Autoconf version 2.69 or higher is requir ...

  9. VS2017编译SNMP++步骤记录

    1.下载地址:https://www.agentpp.com/download.html 三个都下 2.新建解决方案 TestSnmp 3.下载后解压到解决方案文件夹(注意,解压后的 snmp++的版 ...

  10. ARTS打卡计划第一周-Review

    本周分享的文章来自于medium的 Testing Best Practices for Java + Spring Apps 这个文章主要讲的是java测试的一些最佳实践 1.避免函数返回void, ...