移动端 H5 上拉刷新,下拉加载
http://www.mescroll.com/api.html#options
这里有几个重要的设置
1、down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决
2、up 中的
auto 是第一次自动加载;
page是设置分页的size,一般num不在这里设置
clearEmptyId 是没有数据时显示提示无数据的容器Id
callback 是回调地址
//创建MeScroll对象
var mescroll = new MeScroll("mescroll",
{
down: {
use: false
},
up: {
auto: true,
page: { size: 5 },
clearEmptyId: "dataList",
callback: upCallback //上拉加载的回调
}
}); /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function upCallback(page) {
//console.log("upCallback_num:" + page.num);
var olddata = null;
if (page.num !== 1) {
olddata = $scope.orders;
} $scope.searcher.Page = page.num;
$scope.searcher.Rows = page.size;
//console.log("Page:" + $scope.searcher.Page + "&Rows:" + $scope.searcher.Rows);
$http.post(apiUrl + "api/weixintruck/getlist", $scope.searcher).success(
function(data) {
//console.log(data.data);
if (data.code === 200) {
if (data.data.TotalItem > $scope.searcher.CurrentPage * $scope.searcher.PageSize) {
$scope.hasNextPage = true;
} else {
$scope.hasNextPage = false;
}
$scope.orders = data.data.Items;
if (olddata !== null && typeof (olddata) !== "undefined") {
$scope.orders = olddata.concat($scope.orders);
} mescroll.endBySize($scope.orders.length, data.data.TotalItem);
} else {
layer.open({
content: '非法操作',
skin: 'msg',
time: 2 //2秒后自动关闭
});
mescroll.endErr();
}
}).error(function() {
mescroll.endErr();
});
}
移动端 H5 上拉刷新,下拉加载的更多相关文章
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- 微信小程序 上拉刷新/下拉加载
小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...
- ListView上拉刷新和分页加载完整的Dome
很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...
- XRecyclerView上拉刷新下拉加载
效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...
- iOS:延迟加载和上拉刷新/下拉加载的实现
lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
随机推荐
- python __iter__ 迭代器
1. 迭代器是什么? 迭代器是一个对象,是python非常强大的特性 根本上说, 迭代器就是有一个 next() 方法的对象, 而不是通过索引来计数. 当你或是一个循环机制(例如 for 语句)需要下 ...
- JavaScript Functional Programming:声明式与命令式
函数式编程属于声明式编程(declarative programming)的范畴,经常跟声明式编程一块儿讨论的是命令式编程(imperative programming),因为它们是两种不太一样的风格 ...
- angular组件数据和事件
<h1>引入图片</h1> <img src="assets/images/02.png" alt="收藏" /> < ...
- 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明
我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...
- java生成RSA公私钥字符串,简单易懂
java生成RSA公私钥字符串,简单易懂 解决方法: 1.下载bcprov-jdk16-140.jar包,参考:http://www.yayihouse.com/yayishuwu/chapter ...
- Qt坐标系以及自定义可移动控件
1.效果 黑色这个控件是自定义的,可以在界面拖动 2.新建控件的Qt类,父类是QWidget,带ui的,Control.h #ifndef CONTROL_H #define CONTROL_H #i ...
- 沙箱测试环境配置AND证书添加
支付宝SDK接口项目Demo测试 一.进入支付宝开放中心 下载密钥生成器 https://developers.alipay.com/developmentAccess/developmentAcce ...
- 【422】Insert often-used pieces of text in gedit
Ref: Snippets Enable Snippets Plugin Browse Snippets Using Snippets To insert a nippet into your cur ...
- UIFontDownLoad ----动态下载系统提供的字体
程序运行结果如下 : 当点击对应单元格实现下载对应的字体. 控制台打印结果如下 : 2015-10-05 11:14:04.132 UIFontDownLoad[12721:86827] state ...
- Django中使用Bootstrap----带view.py视图函数(也就是项目下的脚本文件)
一.Django中使用Bootstrap 1.首先建立工程,建立工程请参照:https://www.cnblogs.com/effortsing/p/10394511.html 2.在Firstdja ...