AngularJS封装指令实现下拉刷新自动翻页加载数据
2016-08-25 17:17
567 查看
目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下。
滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight。
1、定义模块、指令、控制器
scroll.js代码如下:
2、HTML代码
3、后端PHP代码
1、HTML中多引入Jquery
2、定义指令的时候改为jquery获取
1、AngularJS实现的下拉使用实在外层容器DIV中,必须给DIV设置高度和overflow为auto。
2、Jquery实现的是直接给window绑定滚动事件,不需要设置高度,即可使用。
3、具体使用看项目需求,合适就好。
滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight。
一、不适用Jquery,单纯使用AngularJS实现
1、定义模块、指令、控制器scroll.js代码如下:
// 定义模块 var scroll = angular.module('scroll', []); // 定义滚动指令 scroll.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); } }); }; }); scroll.controller('Main', ['$scope','$http', function ($scope, $http) { // 当前页数 $scope.currentPage = 0; // 总页数 $scope.totalPages = 1; // 防止重复加载 $scope.busy = false; // 存放数据 $scope.items = []; // 请求数据方法 $scope.loadMore = function() { if ($scope.currentPage < $scope.totalPages) { $scope.currentPage++; if ($scope.busy) { return false; } $scope.busy = true; // 请求后台服务器 $http.get('http:/ 4000 /127.0.0.1/Test/scroll/Test.php?page='+$scope.currentPage) .success(function(data) { $scope.busy = false; //组织数据 for (var i in data.data) { $scope.items.push(data.data[i]); } $scope.totalPages = data.countPage; }); } }; // 默认第一次加载数据 $scope.loadMore(); }]);
2、HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> li { height: 120px; border-bottom: 1px solid gray; } #fixed { height: 400px; overflow: auto; } </style> <script src="angular.js"></script> <script src="scroll.js"></script> </head> <body ng-app="scroll" ng-controller="Main"> <div id="fixed" when-scrolled="loadMore()"> <ul> <li ng-repeat="i in items">{{i}}</li> </ul> </div> </body> </html>
3、后端PHP代码
<?php //前端页数 $page = $_REQUEST['page']; $limit = 10; $start = ($page - 1) * $limit; $end = $page * $limit; //组织数据 $arr = array(); for ($i = $start; $i < $end; $i++) { $arr[] = $i; } //返回数据 $result = array( 'data' => $arr, //数据源 'countPage' => 5 //总分页 ); echo json_encode($result);
二、使用Jquery的修改点
1、HTML中多引入Jquery<script src="jquery.js"></script>
2、定义指令的时候改为jquery获取
// 定义滚动指令 scroll.directive('whenScrolled', function() { return function(scope, elm, attr) { // body窗口的滚动加载--需要Jquery $(window).scroll(function () { //滚动条距离顶部的距离 var scrollTop = $(window).scrollTop(); //滚动条的高度 var scrollHeight = $(document).height(); //窗口的高度 var windowHeight = $(window).height(); if (scrollTop + windowHeight >= scrollHeight) { scope.$apply(attr.whenScrolled); } }); }; });
三、注意事项
1、AngularJS实现的下拉使用实在外层容器DIV中,必须给DIV设置高度和overflow为auto。2、Jquery实现的是直接给window绑定滚动事件,不需要设置高度,即可使用。
3、具体使用看项目需求,合适就好。
相关文章推荐
- android快速开发框架--快速实现 页面 加载中 加载失败 无数据等状态以及下拉刷新和自动加载
- AngularJS框架的ng-app指令与自动加载实现方法分析
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- RecyclerView实现下拉刷新与自动加载控件封装
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
- AngularJS:实现页面滚动到底自动加载数据的功能
- AngularJS:实现页面滚动到底自动加载数据的功能
- 使用jsoup获取网页数据实现加载更多和下拉刷新(二)
- 06---数据的下拉刷新上拉加载更多实现
- Android之实现ListView的“下拉刷新”、“上拉加载”、“自动加载”功能(一)
- WP8_当滚动到滚动条的70%时,自动加载数据效果实现
- 基于jquery实现页面滚动到底自动加载数据的功能
- Android实战简易教程<二十五>(基于Baas的数据表查询下拉刷新和上拉加载实现!)
- ajax实现鼠标拖动到底部自动加载新的数据的实例
- 使用scrollpagination实现页面底端自动加载无需翻页功能
- Android之实现ListView的“下拉刷新”、“上拉加载”、“自动加载”功能(二)
- jquery mobile关于使用iscroll动态加载数据实现下拉刷新和上拉的效果
- 基于javascript实现浏览器滚动条快到底部时自动加载数据