dropload插件--下拉刷新 上拉加载更多(JS实现移动端样式)

∫`不撒娇的折耳猫 2020-4-20 1507

依赖

基于Zepto 或者 jQuery 1.7以上版本,推荐jQuery 2.x版本(二者不要同时引用)

功能

主要实现下拉刷新和上拉加载更多功能
github地址/下载地址

实践结果

$('.content').dropload({
    scrollArea : window,
    //下拉刷新功能
    loadUpFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                $('.list').html(data); 
                // 每次数据加载完,必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错,也得重置
                me.resetload();
            }
        });
    }
});

注:使用dropload做下拉刷新时,dropload绑定的元素div.content需要跟包裹被刷新元素的元素div.list有层级关系,不能是同一级别的

<div class="content">
  <!--下拉刷新出现的位置start-->
  <!--下拉刷新出现的位置end-->
    <div class="lists"></div>
    <div class="lists"></div>
    <div class="dropload-down">
        <div class="dropload-refresh">↑上拉加载更多</div>
    </div>
</div>

       自己在实际项目中,用到了下拉刷新功能,有一个模块下拉刷新始终只能执行一次,之后都不起作用,但是其他用了相同插件的模块都是正常运行,排查半天,发现这个模块的元素层级不一样(dropload绑定的元素跟包裹被刷新元素的元素是同一个元素div.content),修改了层级之后(添加元素),下拉刷新正常,附上源码

<section class="tenementBox">
    <ul class="tabHead" id="millia">
        <li class="active">最美物业服务团队</li>
        <li>最美物业人</li>
    </ul>
    <ul class="tabBody" >
        <li class="thisclass">
            <ul class="tenementList clearfix inner" id="content1">
            </ul>
        </li>
        <li>
            <ul class="tenementList clearfix" id="content2">
            </ul>
        </li>
    </ul>
</section>
<script>
    //企业
    $(function(){
        // 页数
        var page = 0;
        // dropload
        $('#millia').dropload({
            scrollArea: window,
            domUp: {
              domClass: 'dropload-up',
              domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
              domUpdate: '<div class="dropload-update">↑释放更新</div>',
              domLoad: '<div class="dropload-load">加载中...</div>'
            },
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: "{:url('index/show/getlist')}?page="+page,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.length;
                        var tenementList_w = $(".tenementBox .tabBody li").width();
                        var tenementList_li = tenementList_w * 0.48;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result += '<li>';
                                result += '<div class="pic" style="height:' + tenementList_li * 19 / 25 + 'px;">';
                                result += '<a href="{:url(\'index/show/detail\')}?id='+data[i].id+'">';
                                result += '<img id="imgInit" src="{$Think.config.systemConfig.domain}/public/static/pic/'+data[i].nid+'-01.png">';
                                result += '</a>';
                                result += '</div>';
                                result += '<h1>'+data[i].name+'</h1>';
                                result += '<p>'+data[i].num+'票<a href="{:url(\'index/show/detail\')}?id='+data[i].id+'" class="btn">查看</a></p>';
                                result += '</li>';
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 插入数据到页面,放到最后面
                        $('#content1').append(result);
                        // 每次数据插入,必须重置
                        me.resetload();
                    },
                    error: function(xhr, type){
                        alert('网络异常');
                        // return false;
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            }
        });
    });
</script>

附PHP代码,服务端请求数据:

public function getlist(){
        if(request()->isGet()){
            $limit = 20;
            $page = request()->get('page',0);
            $offset = ($page - 1) * $limit;
            $user_mod = new model\ZuimeiwuyeUser();
            //企业
            $data = $user_mod->where('category',1)->order('num desc,id')->limit($offset,$limit)->select();
            $json =  json($data);
            $json->send();
        }
    }


最新回复 (0)
发新帖