前言
曾经第一版的下拉刷新组件是用scoll5开发,说实话很愁,因为不光在安卓有很大的资源开销,很卡,ios也不是很近人意,尤其是列表中还有一些input什么的,后来下定决心不用了,用一些更原生的方法去写
组件说明
组件下拉是通过触摸位置来控制顶部div高度变化来模拟,中间的滚动是采用浏览器自然滚动,需要在body上加入css样式
-webkit-overflow-scrolling: touch
,使滚动更加顺滑,上拉加载动作则是通过滚动位置来判断是否到了底部,到了则去执行相应的代码,这样整个滚动的性能更加好!
如果有更好的方法请不吝赐教,让我们的组件更加完善百说不如一个 demo
使用方法奉上
//下拉加载更多
upDown.up({
container: $("body"),
callback: function (me) {
//下拉后回调
setTimeout(function () {
//事例3秒后恢复,下拉后记得清空下列表,恢复到第一页加载到状态
num=0;
lastPage=false;
me.pullToRefreshDone();//此方法是结束下拉转圈恢复
}, 3000);
}
});
//测试代码 定义个模版变量,等页面滚动到底部的时候把此模版加载到页面底部
var tpl="",num= 0,lastPage=false;
for(var i=0;i<10;i++){
tpl=tpl+'<li class=" proItem" ><a>我是list </a></li>';
};
//上拉加载更多
upDown.down(function(fun){
//上拉后回调
$(".btmDIv").show();
if(num<3){
setTimeout(function () {
//事例3秒后恢复
$(".listBox").append(tpl);
fun.reset(lastPage);//当为true的时候 为最后一页了
num=num+1;
}, 2000);
}else {
lastPage=true;
fun.reset(lastPage);//当为true的时候 为最后一页了
}
})
如果用的好请打个赏把!