dropload.js实现上拉加载

缺乏、安全感 2022-03-27 01:22 299阅读 0赞

滑到底部上拉请求数据，加载页面，效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]  
前端代码：  
index.html

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>HTML5手机端手指滑动上拉加载代码 - 代码笔记</title>
      <link type="text/css" media="all" rel="stylesheet" href="css/dropload.css">
    </head>
    <body ontouchstart=""  id="container">
    <article class="khfxWarp">
      <section class="khfxPane" style="display:block">
      </section>
    </article>
    
    <script src="lib/jquery-2.2.3.min.js"></script>
    <script src="lib/dropload.js"></script>
    <script src="lib/khData.js"></script>
    </body>
    </html>

js代码：  
khData.js

$(function () {
    	//拼接数据到页面
        var str = "";
        //记录请求到第几条
        var count = 0;
        // dropload
        var dropload = $('.khfxWarp').dropload({
            scrollArea: window,
            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>'
            },
            loadDownFn: function (me) {
            	//用于保存请求的数据
                var data = [];
                //每次请求4条数据
                count += 4
                //ajax请求数据
                var dataSave = null;
                $.ajax({
                    url:"/mmm",
                    post:"GET",
                    data:{'count':count},
                    success:function(backdata) {
                        if(backdata.data){
                            data = backdata.data;
                        }
                    }
                })
                setTimeout(function () {
                ·		//返回数据为0条时终止
                        if (data.length == 0) {
                            me.resetload();
                            me.lock();
                            me.noData();
                            me.resetload();
                            return;
                        }
                        //将请求到的数据展示到页面
                        for(var i = 0; i < data.length; i++) {
                            if(data[i].valid == 1) {
                                x = "保障中"
                            } else {
                                x = "已失效"
                            }
                            var  start = "";
    
                            if (data[i].productId == '00001' && data[i].proCode == '11') {
                                start="商"
                            }
                            else if(data[i].productId == '00001' && data[i].proCode == '12'){
                                start="交"
                            }
                            else if(data[i].productId != '00001' && data[i].prodCatId == '15'){
                                start="健"
                            }else if(data[i].productId != '00001' && data[i].prodCatId == '16'){
                                start="意"
                            }else if(data[i].productId != '00001' && data[i].prodCatId == '17'){
                                start="财"
                            }else if(data[i].productId != '00001' && data[i].prodCatId == '18'){
                                start="责"
                            }
    
                            str+=
                                "<div class='ccc'>" +
                                "<div class='porxe'></div>" +
                                "<div class='product'>"+
                                "<div class='shang' >"+start+"</div>" +
                                "<div class='jidongche'>"+data[i].productName+"</div>" +
                                "<div class='zhong' style='border: 0.01rem solid'>"+x+"</div>" +
                                "</div>" +
                                "<div class='xiangmu'> "+
                                "<div class='jine' >" +
                                "<div>保险金额：</div>" +
                                "<div>"+"￥"+data[i].premium+"</div>" +
                                "</div>" +
                                "<div class='jinee' >"+
                                "<div>保&nbsp&nbsp单&nbsp号：</div>" +
                                "<div style='maxLength=15;-o-text-overflow:ellipsis;' class='dome' id="+data[i].id+" >"+data[i].id+"</div>" +
                                "</div> " +
                                "<div class='jineee'>" +
                                "<div>保障时间：</div>" +
                                "<div>"+data[i].startDateTime+"&nbsp至&nbsp"+data[i].endDateTime+ "</div>" +
                                "</div>" +
                                "</div>"+
                                "</div>"
                        }
    
                        $(".khfxPane").html(str)
                        me.resetload();
                    }, 500);
            }
        });
    });

node编写后端代码，处理数据:  
server.js

具体代码见git:  
[https://github.com/zhangstar1331/download][https_github.com_zhangstar1331_download]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20220327/b188bb3b51cb4e17bdcc94567f50ce5c.png
[https_github.com_zhangstar1331_download]: https://github.com/zhangstar1331/download