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 ...
随机推荐
- 迷宫-BFS
迷宫问题 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Descript ...
- js连等赋值的陷阱
先来看一段代码: (function(){ var x = y = 1; })(); console.log(y); console.log(x); 最开始我觉得这道题简直是送分题啊,很明显结果为,y ...
- LabVIEW(九):程序结构中的分支结构和顺序结构
一.分支结构 1.创建分支结构:程序框图右键>结构>条件结构 2.Ctrl + I 会显示错误列表,双击错误列表会定位到该错误在程序框图中地方. 3.有的分支可以不连接分支内容. 在不连接 ...
- Python的简单介绍
0. 前言 最近在从头梳理Python的相关知识,有助于以后更好地学习新知识.这篇博客,我简单介绍一下Python语言的有关内容. 1. Python介绍 Python的创始人为荷兰人吉多·范罗苏姆( ...
- centos7进入单用户模式
当我们设置用户密码时,有可能会忘记,这时如何登陆呢,单用户模式就可以 首先我们进入开机界面,按e进行选择 会进入以下界面, 然后找到图中红线标注的该行,在行尾添加 init=/bin/sh 按住Ctr ...
- equalsIgnoreCase()和equals()的区别
String a="ABC";a.equals("abc")为false,a.equalsIgnoreCase("abc")为true;eq ...
- Java多线程之一
进程与线程 进程 进程是进程实体的运行过程,是系统进行资源分配和调度的一个独立单位,比如我们windows电脑上运行的一个程序就是一个进程.在传统进程中进程是资源分配和调度的一个基本单位,在后来引入线 ...
- Web中的积累:外观模式 Facade
摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 壹 前言 目测好久没写文章了,距离上一篇文章也有二十多天.我是怎么了?哈 ...
- vue-06-过度和动画
1, css过度与动画 需要使用 v-if, v-show 来进行 1), 过度类名 v-enter: 进入时触发 v-enter-active: 执行过程中 v-enter-to: 停止时进行 v- ...
- arcgis 加载png图片实现图片跟随地图缩放 和图片的动态播放
效果图: 主要原理: png加载到地图上是不可能的, 图像本身是没有地理信息的. 这里采用一种办法, 在地图上创建一个图形图层, 图形图层放一个矩形,给这个矩形用一个图片填充符号填充. 关键技术点: ...