仿原生高性能下拉刷新上拉加载组件

前言

曾经第一版的下拉刷新组件是用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的时候 为最后一页了
    }
})

如果用的好请打个赏把!

发表评论

电子邮件地址不会被公开。 必填项已用*标注