dropload.js实现上拉加载

最新推荐文章于 2021-08-05 18:17:25 发布

star-1331

最新推荐文章于 2021-08-05 18:17:25 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：页面效果文章标签：上拉加载 dropload.js

本文链接：https://blog.youkuaiyun.com/weixin_40970987/article/details/86305157

页面效果专栏收录该内容

18 篇文章

订阅专栏

滑到底部上拉请求数据，加载页面，效果图如下：
在这里插入图片描述
前端代码：
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

var express=require('express');
var mysql=require('mysql');
var cookie=require('cookie-parser');
var session=require('express-session');
var bodyParser=require('body-parser');
var querystring=require('querystring');
var multer=require('multer');
var proxy = require('http-proxy-middleware');
var server=express();
//监听端口
server.listen('8080');
server.use(express.static('www/'));
server.get('/mmm',function(req,res){
  var data = [
     {
       "endDateTime": 1575216000,
       "id": "01201811010700203900000003",
       "orderBaseId": "66dfa0e2-5503-4da7-8e47-4d6e39daf829",
       "premium": 188,
       "proCode": "ZHA07593",
       "prodCatId": "15",
       "productId": "10051",
       "productName": "个人中高端医疗保险",
       "startDateTime": 1543680000,
       "userId": "70000001073",
       "valid": 1
     },
     {
       "endDateTime": 1572623999,
       "id": "0618610101D00360030057",
       "orderBaseId": "af45fc0b-ba28-437b-92c5-da6793bda5c9",
       "premium": 66215,
       "proCode": "11",
       "prodCatId": null,
       "productId": "00001",
       "productName": "商业险",
       "startDateTime": 1541088000,
       "userId": "80000000583",
       "valid": 1
     },
     {
       "endDateTime": 1572623999,
       "id": "0618610101D00332030037",
       "orderBaseId": "af45fc0b-ba28-437b-92c5-da6793bda5c9",
       "premium": 54835,
       "proCode": "12",
       "prodCatId": null,
       "productId": "00001",
       "productName": "交强险",
       "startD": "80000000583",
       "valid": 1
     },
     {
       "endDateTime": 1571241599,
       "id": "0618429813D00360030008",
       "orderBaseId": "14283079-ed45-426e-9fb1-12252daa5d3a",
       "premium": 4530,
       "proCode": "11",
       "prodCatId": null,
       "productId": "00001",
       "productName": "商业险",
       "startDateTime": 1539705600,
       "userId": "80000000583",
       "valid": 1
     },
     {
       "id":"06181933235465656666666",
       "userId":"8000000583",
       "productId":"00001",
       "proCode":"12",
       "productName":"交强险",
       "premium":null,
       "startDateTime":1541088000,
       "endDataTime":1575216000,
       "valid":1,
       "orderBaseId":"af45fc0b-ba28-437b-92c5-da6793bda5c9",
       "prodCatId":"11"
     },
     {
       "endDateTime": 1575216000,
       "id": "01201811010700203900000003",
       "orderBaseId": "66dfa0e2-5503-4da7-8e47-4d6e39daf829",
       "premium": 188,
       "proCode": "ZHA07593",
       "prodCatId": "15",
       "productId": "ZHA07593",
       "productName": "个人中高端医疗保险",
       "startDateTime": 1543680000,
       "userId": "70000001073",
       "valid": 1
     },
     {
       "id":"0615234354545545342222222",
       "userId":"8000000583",
       "productId":"00001",
       "proCode":"11",
       "productName":"商业险",
       "premium":null,
       "startDateTime":1541088000,
       "endDataTime":1575216000,
       "valid":1,
       "orderBaseId":"af45fc0b-ba28-437b-92c5-da6793bda5c9",
       "prodCatId":null
     },
     {
       "id":"283847464646464646464646464646464646",
       "userId":"8000000583",
       "productId":"00001",
       "proCode":"15",
       "productName":"商业险",
       "premium":null,
       "startDateTime":1541088000,
       "endDataTime":1572623999,
       "valid":0,
       "orderBaseId":"af45fc0b-ba28-437b-92c5-da6793bda5c9",
       "prodCatId":null
     },
     {
       "endDateTime": 1575216000,
       "id": "01201811010700203900000003",
       "orderBaseId": "66dfa0e2-5503-4da7-8e47-4d6e39daf829",
       "premium": 188,
       "proCode": "ZHA07593",
       "prodCatId": "14",
       "productId": "10051",
       "productName": "个人中高端医疗保险",
       "startDateTime": 1543680000,
       "userId": "70000001073",
       "valid":1
     },
     {
       "endDateTime": 1568822400,
       "id": "012018329806D0194000000001",
       "orderBaseId": "762880ab-7524-4294-890a-10e7fc706f71",
       "premium": 168,
       "proCode": "C0172",
       "prodCatId": "16",
       "productId": "10006",
       "productName": "新驾乘无忧意外险",
       "startDateTime": 1543680000,
       "userId": "70000001073",
       "valid":1
     },{
       "endDateTime": 1565712000,
       "id": "01201811012000194000000001",
       "orderBaseId": "369c7bd9-fac7-4261-8b27-253e907f3311",
       "premium": 168,
       "proCode": "C0172",
       "prodCatId": "16",
       "productId": "10006",
       "productName": "新驾乘无忧意外险",
       "startDateTime": 1534176000,
       "userId": "80000000583",
       "valid": 1
     }
   ]
  //获取前端请求到第几条
  var count = req.query.count;
  //返回对应的数据
  var msg = data.slice(count-4,count);
  res.send({
    data:msg
  })
})

具体代码见git:
https://github.com/zhangstar1331/download