//分页下拉
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)的更多相关文章

  1. js 移动端上拉加载下一页通用方案

    取页面三种高度 //取进度条到底部距离 var getScrollTop = function () { var scrollTop = 0; if (document.documentElement ...

  2. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  5. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  6. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

  7. Swiper+JS 上拉刷新

    JS // 上拉刷新                        var page = 2;            var isAjax = true;//加载数据前状态            $( ...

  8. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  9. 移动端好用的下拉加载上拉刷新插件 dropload插件

    入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...

随机推荐

  1. C++ Opencv 自写函数实现膨胀腐蚀处理

    一.膨胀腐蚀学习笔记 二.代码及结果分享 #include <opencv2/opencv.hpp> #include <iostream> using namespace s ...

  2. python 将一个列表去重,并且不打乱它原有的排列顺序

    old_lst = [2, 2, 1, 1, 3, 4] new_lst = list(set(old_lst)) new_lst.sort(key=old_lst.index) print(new_ ...

  3. springbean的生命周期

    1.Spring对Bean进行实例化(相当于程序中的new Xx())2.Spring将值和Bean的引用注入进Bean对应的属性中3.如果Bean实现了BeanNameAware接口,Spring将 ...

  4. IdentityServer4源码颁发token分析及性能优化

    IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...

  5. css自适应布局之“圣杯双飞翼”

    首先,这个这么扯淡又装逼的名字不知道是谁起的,大意就是说:中间的内容随着浏览器宽度的不同,进行宽度自适应操作,而两边的内容固定宽度. 来,上个代码演示一下: <style> *{ marg ...

  6. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局

    当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile  ,学 ...

  7. SpringBoot2.0源码分析(四):spring-data-jpa分析

    SpringBoot具体整合rabbitMQ可参考:SpringBoot2.0应用(四):SpringBoot2.0之spring-data-jpa JpaRepositories自动注入 当项目中存 ...

  8. MySQL中间件之ProxySQL(12):禁止多路路由

    返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.multiplexing multiplexing,作用是将语句分 ...

  9. 动手实践Mybatis插件

    前言 Mybatis的插件开发过程的前提是必须要对Mybatis整个SQL执行过程十分熟悉,这样才能正确覆盖源码保证插件运行,总的来说Mybatis的插件式一种侵入式插件,使用时应该十分注意. 在之前 ...

  10. “多个单核CPU”与“单个多核CPU”哪种方式性能较强?

    多个单核CPU: 成本更高,因为每个CPU都需要一定的线路电路支持,这样对主板上布局布线极为不便.并且当运行多线程任务时,多线程间通信协同合作也是一个问题.依赖总线的传输,速度较慢,且每一个线程因为运 ...