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 ...
随机推荐
- MyBatis 的动态 SQL 使用说明
动态SQL简介 参考文档地址:http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 ...
- 机器学习入门05 - 泛化 (Generalization)
原文链接:https://developers.google.com/machine-learning/crash-course/generalization 泛化是指模型很好地拟合以前未见过的新数据 ...
- vue android低版本 白屏问题 你是不是用了Object.assign ??
问题描述 在部分比较低版本的手机中,发现apk安装后白屏,但是大部分手机都能安装. 本人在使用android4.4时候,也是安装后打开白屏. 原因: 代码写法不兼容 this.user = Objec ...
- 使用 Infer.NET 进行概率编程
本文介绍了如何使用 Infer.NET 进行概率性编程. 概率性编程是一种将自定义模型表示为计算机程序的机器学习方法. 借助它可以在模型中包含专业知识,使机器学习系统更易理解. 它还支持在线推断,即在 ...
- 搞懂ES6的import export
引言 说来惭愧,这两个关键字几乎天天在写,但是自己写的模块export出去的对象,import居然拿不到,也是没谁了
- 13 Tensorflow API主要功能
要想使用Tensorflow API,首先要知道它能干什么.Tensorflow具有Python.C++.Java.Go等多种语言API,其中Python的API是最简单和好用的. Tensor Tr ...
- leetcode — unique-paths-ii
/** * Source : https://oj.leetcode.com/problems/unique-paths-ii/ * * * Follow up for "Unique Pa ...
- mysql开启general_log查看执行sql
1.查看是否打开 SHOW variables like "%general_log%"; 2.打开 set global general_log=On 3.查看sql执行 tai ...
- 详细分析MySQL的日志(一)
官方手册:https://dev.mysql.com/doc/refman/5.7/en/server-logs.html 不管是哪个数据库产品,一定会有日志文件.在MariaDB/MySQL中,主要 ...
- MySQL抓包工具:MySQL Sniffer【转】
本文来自:https://github.com/Qihoo360/mysql-sniffer 简介 MySQL Sniffer 是一个基于 MySQL 协议的抓包工具,实时抓取 MySQLServer ...