zoukankan      html  css  js  c++  java
  • dropload插件的使用(上拉下滑加载数据)

    .导入

    js dropload.min.

    js zepto.min.js  <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 -->

    $(function(){
        // 页数
        var page = 1;
        // 每页展示5个
        var size = 5;
        // dropload
        $(".jf_rebate_busin").dropload({
            scrollArea : window,
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'post',
                    data:{uid:"<?php echo $params['uid']?>",x:"<?php echo $params['x'] ?>",y:"<?php echo $params['y'] ?>",order:"<?php echo $params['order'] ?>",name:"<?php echo $params['name'] ?>",material_type:"<?php echo $params['material_type'] ?>",brand_id:"<?php echo $params['brand_id'] ?>",   classify_id : "<?php echo $params['classify_id'] ?>",brand_id:"<?php echo $params['brand_id'] ?>",page:page},
                  
                    url: '/Distributor/rebate_list_ajax',
                    dataType: 'html',
                    success: function(data){
                        
                        if(data){
                            result = data;
                        }else{
                             // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        
                        /*
                        var arrLen = data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result +=   '<li class="bdr-bom clearfix"><a class="item opacity" href="'+data[i].link+'">'
                                                +'<img src="'+data[i].pic+'" alt="">'
                                                +'<p>'+data[i].title+'</p>'
                                                +'<span class="date">'+data[i].date+'</span>'
                                            +'</a></li>';
                            }
                            
                        // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        */
                        // 延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面,放到最后面
                            $('.rebate-list').append(result);
                            // 每次数据插入,必须重置
                            me.resetload();
                        },100);
                    },
                    error: function(xhr, type){
                        // alert('加载失败!');
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            }
        }); 
    });    
  • 相关阅读:
    Python 数据结构_队列
    Python 数据结构_堆栈
    基于SAP的中国式数据分析浅谈
    基于SAP的中国式数据分析浅谈
    logstash 处理nginx 错误日志
    logstash nginx 访问日志
    其中 (%{WORD:x_forword}|-) |表示或的意思
    grok 官方文档
    vCenter 部件关系简介 & 网络原理
    haproxy nginx 多路径
  • 原文地址:https://www.cnblogs.com/polax/p/7125236.html
Copyright © 2011-2022 走看看