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 ...
随机推荐
- Python面向对象4:类的相关函数与属性
1 类相关函数- issubclass:检测一个类是否是另一个类的子类- isinstance:检测一个对象是否是一个类的实例- hasattr:检测一个对象是否由成员xxx- getattr: ge ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
- MySQL(5)---锁
锁 一概述 数据库锁定机制简单来说,就是数据库为了保证数据的一致性,而使各种共享资源在被并发访问变得有序所设计的一种规则.对于任何一种数据库来说都需要有相应的锁定机制. MySQL各存储引擎使用了三种 ...
- C# 算法之选择排序
1.简介 选择排序是排序中比较简单的一种,实现的大致思路如下:首先我们拿到一个需要排序的数组,假设该数组的第一个元素是最小的,然后将数组中剩下的元素,于最小的元素进行比较,如果中间有比第一个元素的小的 ...
- C++版 - LeetCode 144. Binary Tree Preorder Traversal (二叉树先根序遍历,非递归)
144. Binary Tree Preorder Traversal Difficulty: Medium Given a binary tree, return the preorder trav ...
- Docker容器中开始.Net Core之路
开始写这篇博客前,已经尝试练习过好多次Docker环境安装,.Net Core环境安装了,在这里替腾讯云做一个推广,假如我们想学习.练手.net core 或是Docker却苦于没有开发环境,服务器也 ...
- C#系列之聊聊.Net Core的InMemoryCache
作者:暴王 个人博客:http://www.boydwang.com/2017/12/net-core-in-memory-cache/ 这两天在看.net core的in memory cache, ...
- 【EF6学习笔记】(九)异步处理和存储过程
本篇原文:Async and Stored Procedures 为何要采用异步? 一个Web服务器肯定有可用线程的限制,那么在一些访问量特别大的情况下,线程肯定会消耗完:这个时候服务器肯定处理不了请 ...
- https跨域到http问题解决
整体结构 用户--https-->Nginx--http-->Tomcat 页面中包含了iframe,iframe的src也是Https的,但是当frame里面的内容表单提交后tomcat ...
- 条件随机场conditional random field
主要翻译自http://blog.echen.me/2012/01/03/introduction-to-conditional-random-fields/,原作者是MIT的大神,加入了一些我自己的 ...