引用iscroll的一个封装方法
var Page = function(cid, data,callback) {
var _self = this;
var cid = $(cid);
var currPage=1;
// 下拉上拉加载数据
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
this.query = function(curr) {
if(curr){
currPage=curr;
}
data["PAGE_INFO.currentPage"]=currPage;
if(!myScroll){loaded();}
PAjax({
data : data,
success : function(json) {
$('#loading').hide();
if (isEmpty(json.MSG)) {
currPage++;
var list = json.PAGE_LIST;
_self.addBillHtml(list);
myScroll.refresh();
} else {
_alert(json.MSG, "", function() {
var html = '<li class="listCenter">数据加载失败!</li>';
$(cid).append(html);
});
}
}
});
}
this.refresh=function(){
cid.empty();
_self.query(1);
}
this.addBillHtml = function(list) {
if (list && list.length > 0) {
var htmls = [];
$.each(list, function() {
var html = callback(cid, this);
htmls.push(html);
})
cid.append(htmls);
} else {
$("#pullUp").hide();
$(".endList").show();
}
;
myScroll.refresh();
}
this.iScrollClick = function() {
if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent))
return false;
if (/Chrome/i.test(navigator.userAgent))
return (/Android/i.test(navigator.userAgent));
if (/Silk/i.test(navigator.userAgent))
return false;
if (/Android/i.test(navigator.userAgent)) {
var s = navigator.userAgent.substr(navigator.userAgent
.indexOf('Android') + 8, 3);
return parseFloat(s[0] + s[3]) < 44 ? false : true
}
}
// 初始化iScroll控件
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll(
'wrapper',
{
scrollbarClass : 'myScrollbar', /* 重要样式 */
useTransition : false, /* 此属性不知用意,本人从true改为false */
topOffset : pullDownOffset,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove : function() {
/*if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5
&& pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else */
if (this.y<0 && this.y < (this.maxScrollY - 5)
&& !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放立即加载...';
this.maxScrollY = this.maxScrollY;
} else if (this.y<0 && this.y > (this.maxScrollY + 5)
&& pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd : function() {
if (pullDownEl.className.match('flip')) {
//pullDownEl.className = 'loading';
// pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
// pullDownAction(); // Execute custom function
// (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
// pullUpAction(); // Execute custom function (ajax
// call?)
_self.query();
}
}
});
setTimeout(function() {
document.getElementById('wrapper').style.left = '0';
}, 800);
}
// 初始化绑定iScroll控件
/*document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);*/
document.addEventListener('DOMContentLoaded', loaded, false);
}
引用
page=new Page(tabs,data,addRow);
page.query();
引用iscroll的一个封装方法的更多相关文章
- 【eclipse jar包】在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可。
Eclipse中导入外部jar包 在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可. 工具/原料 Eclipse 需要 ...
- 自己封装的一个js方法用于获取显示的星期和日期时间
自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...
- JS实现继承,封装一个extends方法
父类 function Person(name,age){ this.name = name; this.age = age; } Person.prototype = { eat:function( ...
- 使用一个封装的json删除方法
<!-- 前台js代码:其实现的目的:利用异步的封装方法实现增删改操作!--> <script type="text/javascript"> functi ...
- 引用iScroll.js实现上拉和下拖刷新
使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件 ...
- Lambda语言篇 —— lambda, 方法引用, 目标类型和默认方法
本文介绍了Java SE 8中新引入的lambda语言特性以及这些特性背后的设计思想.这些特性包括: lambda表达式(又被成为"闭包"或"匿名方法") 方法 ...
- .Net基础——程序集与CIL HttpClient封装方法 .Net Core 编码规范 C#中invoke和beginInvoke的使用 WebServeice 动态代理类
.Net基础——程序集与CIL 1. 程序集和CIL: 程序集是由.NET语言的编译器接受源代码文件产生的输出文件,通常分为 exe和dll两类,其中exe包含Main入口方法可以双击执行,dll ...
- 关于GeneXus封装方法Model的方法
最近 刚从外地出差回来 工作任务不是很重 能够抽点时间记点东西 下午花了2个多钟头尝试了一下GeneXus的封装方法的功能,这里记一下便于自己以后查看.我们在许多项目中或多或少都会有着重复代码编写的 ...
- Javascript 封装方法
基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...
随机推荐
- Tomcat免安装版的环境变量配置以及Eclipse下的Tomcat配置和测试
Tomcat是目前比较流行的开源且免费的Web应用服务器,在我的电脑上第一次安装Tomcat,再经过网上教程和自己的摸索后,将这个过程 重新记录下来,以便以后如果忘记了可以随时查看. 注意:首先要明确 ...
- java中将list、map对象写入文件
链接地址:http://blog.sina.com.cn/s/blog_4a4f9fb50101p6jv.html 推荐:凤爪女瓜子男怪象该谁反思伦敦房价为什么持续暴涨 × wvqusrtg个 ...
- ZOJ 3204 Connect them MST-Kruscal
这道题目麻烦在输出的时候需要按照字典序输出,不过写了 Compare 函数还是比较简单的 因为是裸的 Kruscal ,所以就直接上代码了- Source Code : //#pragma comme ...
- 分享:json2.js源代码解读笔记
1. 怎样理解"json" 首先应该意识到,json是一种数据转换格式,既然是个"格式",就是个抽象的东西.它不是js对象,也不是字符串,它仅仅是一种格式,一种 ...
- MYSQL设计优化
本文将从各方面介绍优化mysql设计的一些方式. 1.优化sql语句 (1)定位须要优化的sql语句 1)show status统计SQL语句频率 对Myisam和Innodb存储引擎都计数的參数: ...
- javascript 动态推断html元素
在javascript中为了针对不同的元素运行不同的操作,须要在javascript中对触发事件的元素进行推断,然后运行不同的操作. 样例: html <input type='button' ...
- 03-IOSCore - XML及解析、Plist
一.XML 可扩展标记语言 是什么?是一段有规范的字符串, 用在哪?用在任何地方 语法: * 结点Node <结点名 属性名="属性值"> 结点内容 </结点名& ...
- 2个NASM开发环境下载以及30篇教程(lostspeed)
http://download.csdn.net/detail/lostspeed/8958175http://download.csdn.net/detail/lostspeed/8954263 h ...
- windows phone8手机玩玩
背景介绍 北京移动在搞活动,预存话费赠手机活动,因此办理了一个,来玩新手机了. 上手一周了,白色的手机,对我来说配置凑合,主要是想学习wp8手机的开发,这样也有个样机玩玩.开发人员就是这么的喜欢玩. ...
- Mapper XML Files详解
扫扫关注"茶爸爸"微信公众号 坚持最初的执着,从不曾有半点懈怠,为优秀而努力,为证明自己而活. Mapper XML Files The true power of MyBatis ...