js 移动端上拉刷新(基于ng1)
//分页下拉
var ajaxScroll = function() {
var screenHeight = window.screen.height;
$(document).scroll(function() {
if (screenHeight + document.body.scrollTop >= document.body.scrollHeight) {
$scope.pageNum = Math.ceil($scope.total / $scope.pageSize);
if ($scope.pageNo <= $scope.pageNum) {
$scope.pageNo++;
$scope.tips = '正在加载数据...';
setTimeout(function() {
loadData($scope.state, $scope.pageNo);
}, 500);
$scope.$apply();
}
$(document).unbind('scroll');
}
}) }
$scope.pageNo = 1; //第几页
$scope.pageSize = 5; //展示条数
$scope.total; //总条数
$scope.tasks = [];
$scope.state = 0;
//加载列表
function loadData(state, page) {
$.ajax({
type: "get",
url: webroot + '/services/api/task/list/' + state + '?' + 'pageNo=' + $scope.pageNo + '&pageSize=' + $scope.pageSize,
dataType: "json",
headers: {
'ticket': ticket
},
success: function(rsp) {
if (rsp.code == 200) {
$scope.total = rsp.result.total;
// $scope.tasks = rsp.result.tasks;
if ($scope.tasks) {
for (var i = 0; i < rsp.result.tasks.length; i++) {
$scope.tasks.push(rsp.result.tasks[i]);
}
} else {
$scope.tasks = rsp.result.tasks;
}
if ($scope.pageNo >= (Math.ceil($scope.total / $scope.pageSize)) && rsp.result.tasks.length) {
$scope.tips = '已经全部加载完毕';
} else if (!rsp.result.tasks.length) {
$scope.tips = '暂时没有数据';
} else {
ajaxScroll();
}
$scope.pageNo = rsp.result.pageNo;
$scope.$apply();
} else {
console.log(rsp.message)
}
},
error: function(data) { console.log("error"); },
});
};
//首次加载
loadData($scope.state, $scope.pageNo);
js 移动端上拉刷新(基于ng1)的更多相关文章
- js 移动端上拉加载下一页通用方案
取页面三种高度 //取进度条到底部距离 var getScrollTop = function () { var scrollTop = 0; if (document.documentElement ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 【Web】移动端下拉刷新、上拉加载更多插件
移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...
- Swiper+JS 上拉刷新
JS // 上拉刷新 var page = 2; var isAjax = true;//加载数据前状态 $( ...
- iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
随机推荐
- wordpress升级版本时出现错误“Maximum execution time of 30 seconds exceeded”
wordpress版本是4.9,之前升级5.0时就提示这个错误了,但因为我用的第三方主题,所以也没想去解决,也担心升级了wp版本后主题出问题. 现在wp版本已经到了5.2了,我闲着无聊就又点了升级,结 ...
- 项目文件与 SVN 资源库同步提示错误 Attempted to lock an already-locked dir
问题描述 之前为了图方便,在eclipse中直接把三个jsp文件复制到了eclipse中我新建的一个文件夹中,把svn版本号信息也带过来了,然后我又删除了这三个jsp文件,接着先把这三个jsp复制到桌 ...
- Kali学习笔记9:端口扫描详解(上)
UDP端口扫描: 原理:回应ICMP不可达,代表端口关闭:没有回应,端口开启 建议了解应用层的UDP包头结构,构建对应的UDP数据包用来提高准确度 另外:所有的扫描都存在误判情况 我们用Scapy写个 ...
- idea src下源文件和class编译文件不一致
今天遇到一个神奇BUG,一个和elasticsearch没有任何关系的项目,报错ES某个包找不到,刚开始以为是依赖了父项目的某个包,并且本项目主启动类ComponentScan扫描了相关的类进入Spr ...
- Kubernetes集群搭建之CNI-Flanneld部署篇
本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 Flannel是CoreOS提供用于解决Dokcer集群跨主机通讯的覆盖网络工具.它的主要思路 ...
- 求一个Map中最大的value值,同时列出键,值
求一个Map中最大的value值,同时列出键,值 方法1. public static void main(String[] args){ Map map=new HashMap(); map.p ...
- 使用Expression进行动态排序分页
Expression动态查询.分页 Expression,表达式树,以lamda表达式创建,就以表达式目录树的形式将强类型的lambda表达式标识为数据结构. 排序 /// <summary&g ...
- 04 Tensorflow的中的常量、变量和数据类型
打开Python Shell,先输入import tensorflow as tf,然后可以执行以下命令. Tensorflow中的常量创建方法: hello = tf.constant('Hello ...
- 使用Laya引擎开发微信小游戏(下)
本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{ ex ...
- Cookie提要
Cookie的基本概念和设置 Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制.从实现上说,Cookie是存储在客户端上的小段数据,浏览器(即客户端)通过HTTP协议和服务器端进行Coo ...