移动端下拉刷新,上拉加载插件dropload.js

原创 15038098692 随笔 随笔 1171阅读 2017-05-11 17:38:59 举报

文档说明

需要引入的文件
<script src="js/zepto.min.js"></script>
<script src="js/dist/dropload.min.js"></script>
<link rel="stylesheet" href="js/dist/dropload.css">

$('div').dropload({
滑动区域
scrollArea: window,

        定义上方样式
        domUp: {
            domClass: "dropload-up",
            domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate: '<div class="dropload-update">↑释放更新</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>刷新中...</div>'

        定义下方样式
        domDown: {
            domClass: "dropload-down",
            domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData: '<div class="dropload-noData">暂无数据</div>'
        },

        是否自动加载

        触发dropload的最小滑动距离
        distance: 50,

        提前加载距离
        threshold: "",

        下拉刷新方法
        loadUpFn: function(me){

            window.reload();

            重置dropload
            me.resetload();
        },

        上滑加载更多方法
        loadDownFn: function(me){

            请求加载数据
            $.ajax({

                当数据全部请求完时锁定dropload
                lock(up/down);//up锁定下拉操作 down锁定上滑操作 不填全部锁定
                noData(true/false);//没有更多数据
            });

            重置dropload
            me.resetload();

        }

});

页面代码

<script src="js/jquery-2.0.0.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/juicer-min.js"></script>
<script src="js/dist/dropload.min.js"></script>
<link rel="stylesheet" href="js/dist/dropload.css">

<div id="topiclist">
<!-- 模板开始 -->
<script type="text/juicer" id="TemplateArtOne">
<div class="huatitle">
<div class="canyur" style="margin-top:-10px;">
<div class="canyurl">
<p style="float:left;">${commentnum+likenum}人参与</p>
</div>
<div class="canyurr">
<p>${time}</p>
</div>
</div>
<div class="biaoti">
<h4>${title}</h4>
</div>
<div class="neir">
<p>$${content}</p>
</div>
</div>
</script>
<!-- 模板结束 -->
</div>

<div id="m4" class="c858"
style="margin: 10px 0;text-align: center;display:none;">网络比较慢,请重新尝试...</div>
<div id="m2" class="c858"
style="margin: 10px 0px; text-align: center; display: none;">
<img src="img/loading.gif" alt="">正在加载...
</div>
<div id="m3" class="c858" style="margin: 10px 0px; text-align: center;">已加载全部数据</div>

js代码

var page = 0;//页数

//dropload
$('#topiclist').dropload({
//滑动区域
scrollArea : window,
//下部样式
domDown : {
domClass : 'dropload',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domUpdate : '<div class="dropload-update">↓释放加载</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
//下部方法
loadDownFn : function(me){
page++;//页数加1
$.ajax({
url:'topicServlet',
type:'get',
dataType:'json',
data:{"page":page},
success: function (data) {

                var artlist = data.topicList;
                var len = artlist.length;                               
                for (var i = 0; i < len; i++) {
                    var tpl = document.getElementById('Temp').innerHTML;//获取模板对象
                    var html = juicer(tpl, artlist[i]);//嵌套
                    $("#topiclist").append(html);
                }

                if (len < 20) {//表示数据全部加载完(一页20条)                   
                    $("#m2").hide();//隐藏正在加载
                    $("#m3").show();//显示全部加载完
                    $("#m4").hide();//隐藏网络异常
                    me.lock();//锁定上拉下拉操作
                    me.noData();//无数据
                }                                   
            },
            error:function (e) {
                $("#m2").hide();//隐藏正在加载
                $("#m3").hide();//隐藏全部加载完
                $("#m4").show();//显示网络异常
                console.log('错误'+e);
            }
        });//ajax()方法结束

        setTimeout(function(){
            me.resetload();//每次数据加载完都要重置(dropload的方法)
        },1000);

  }//loadDownFn()方法结束

});//dropload()方法结束

原文网址:http://blog.csdn.net/ani521smile/article/details/53861255

评论 ( 4 )
最新评论
laiwenabc 2017-05-31 17:58:48 4F

这个插件的git地址:https://github.com/ximan/dropload 讲道理这插件比起iscroll感觉好用点,但就是坑略微有点多

河北秦皇岛88 2F 2017-05-12 16:43:40 3F

452658607@qq.com 这是我邮箱 麻烦发我一份 学习一下

15038098692 1F 2017-05-12 16:33:58 2F

有个小例子,需要的话可以发一下

河北秦皇岛88 2017-05-12 11:33:52 1F

楼主能不能本地文件压缩放上来?