mescroll上拉加载的实现
html部分
<div id="mescroll" class="mescroll">
<ul class="recordlist news-list" id="newsList">
<!-- <li> -->
<!-- <div class="recordimg">
<i class="iconfont"></i>
</div> -->
<!-- <div class="list-items">
<p>充值时间</p>
<p>2017-12-22</p>
</div>
<div class="list-items">
<p>卡号</p>
<p>456123456789456</p>
</div>
<div class="list-items">
<p>微信充值</p>
<p>2017-12-22</p>
</div>
<div class="list-items">
<p>充值金额</p>
<p>100</p>
</div>
</li> -->
</ul>
</div>
css部分
.mescroll{
position: fixed;
top: 103px;
left: 0;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
js 部分
var mescroll = new MeScroll("mescroll", {
up: {
callback: upCallback, //上拉加载的回调
isBounce: false,
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 2 //每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
// 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
// 这就是为什么无更多数据有时候不显示的原因.
toTop: {
//回到顶部按钮
src: "./images/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
}
}
});/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function upCallback(page){
//联网加载数据
getListDataFromNet(page.num, page.size, function(curPageData){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
// mescroll.endSuccess(curPageData.length);
//提示:curPageData.length必传的原因:
// 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
// 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
// 3.使配置的noMoreSize生效
//设置列表数据
// setListData(curPageData, true);
}, function(){
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(curPageData, isAppend) {
console.log(curPageData);
var listDom=document.getElementById("newsList");
for (var i = 0; i < curPageData.length; i++) {
var newObj=curPageData[i];
var str='';
str+='<div class="list-items">';
str+='<p>充值时间</p>';
str+='<p>'+newObj.starttime+'</p>';
str+='</div>';
str+='<div class="list-items">';
str+='<p>充值卡号</p>';
str+='<p>'+newObj.device_id+'</p>';
str+='</div>';
// str+='<div class="list-items">';
// str+='<p>微信充值</p>';
// str+='<p>2017-12-22</p>';
// str+='</div>';
str+='<div class="list-items">';
str+='<p>充值金额</p>';
str+='<p>'+newObj.order_money+'</p>';
str+='</div>';
var liDom=document.createElement("li");
liDom.innerHTML=str;
if (isAppend) {
listDom.appendChild(liDom);//加在列表的后面,上拉加载
}
}
}
// 获取url参数
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
/*联网加载列表数据
在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
var downIndex=0;
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
var flag = true
//延时一秒,模拟联网
setTimeout(function () {
var url="http://www.shawy.cn/Mobile/Userapi/buy_order_list";
var ka_code = GetRequest().device_id;
// console.log(ka_code)
try{
var newArr=[];
if(flag == true){
$.ajax({
url: url+'?page=' + pageNum + "&page_size=" + pageSize + '&device_id='+ ka_code, //如何修改page.num从0开始 ?
success: function(curPageData) {
var curPageData = JSON.parse(curPageData);
// pageSize = curPageData.length;
// console.log(curPageData);
//此处模拟上拉加载返回的数据
// for (var i = 0; i < curPageData.length; i++) {
// var newObj=curPageData[i];
// if(i==curPageData.length) break;
// newArr.push(newObj);
// }
// }
for (var i = 0; i < pageSize; i++) {
if(curPageData.length<pageSize){
flag = false;
}
var newObj=curPageData[i];
newArr.push(newObj);
}
mescroll.endSuccess(curPageData.length);
setListData(curPageData, true);
//联网成功的回调
successCallback&&successCallback(newArr);
}
})
}
}catch(e){
//联网失败的回调
errorCallback&&errorCallback();
}
},1000)
}
mescroll上拉加载的实现相关推荐
- php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下 使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
- html 设置移动端页面滚动,a.html · 焚心/移动端页面上下滚动加多页面上拉加载功能及mescroll插件的使用 - Gitee.com...
我的 我的 交易记录 可兑换签纸贺 兑换历史 活动名称:{{item.title}} 有效期至:{{item.time}} 合计可用额: {{item.price}}元 去兑换 交易记录: 兑换10. ...
- Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
- 关于uniapp的下拉刷新,上拉加载的使用
uniapp 是基于vue生态的,兼容多端的解决方案的一个框架. 其编码风格和原生的信微信小程序有极为相似. uniapp可以轻松实现下拉刷新和上拉加载的效果,在实际应用中,对于我们对列表的分页处理, ...
- 微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
- uniapp 上拉加载更多完整实现源码
直接上代码 <template><view class="searchList"><!-- 搜索框 --><Search></ ...
- 20-flutter下拉刷新与上拉加载
1 RefreshIndicator 下拉刷新控件 下拉刷新的时候会回调 onRefresh 方法 RefreshIndicator(onRefresh: _handleRefresh,child: ...
- 小程序一次性上传多个本地图片,上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片 最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述 最近做项目的时候要实现一个上 ...
- 安卓下拉刷新、上拉加载数据显示
整个是一个scrollView,嵌套一个线性布局,下拉刷新.或者上拉加载后,通过addView()方法,加载消息体,每一个消息体是一个复杂的子view. 做一个类似qq客户端"好友动态&qu ...
最新文章
- 李兴华html css,2014MLDN(李兴华老师视频教程)
- 从Varchar转换为 datetime
- QEMU和KVM 中断处理过程
- 就业阶段-java语言进价_day04
- 转(HP大中华区总裁孙振耀退休感言)
- php final什么意思,php final关键字的应用
- 《重构:改善既有代码的设计》—第1章1.5节结语
- 大数据Hadoop学习记录(3)----基于JAVA语言的HDFS文件过滤与合并
- Mysql客户端的安装
- 传感器基础结构与通信原理
- Halcon找圆系列(1)如何检测圆形
- 教你轻松快速学会用Calibre TXT转MOBI
- 如何生成3分钟,5分钟,n分钟K线数据
- 题解 【NOIP2016】魔法阵
- python计算营业额代码_python计算营业额的代码_python 统计代码行数简单实例
- java求因子_一个数恰好等于它的因子之和java
- Excel中如何让第一行、第二行一直显示出来 excel冻结窗格与拆分窗格
- 【基于人脸特征的心率检测研究】非接触式光电容积图和红外人脸视频瞬时心率估计
- 基于SSH的校园二手物品交易系统
- 谁来给移动互联网发牌照:安卓生态圈畸形发展