zoukankan      html  css  js  c++  java
  • 【前端】上拉加载更多dropload.min.js的使用

    代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分)

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../../static/js/common/jquery.js"></script>
    <!--上拉加载更多-->
    <link rel="stylesheet" href="http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/css/common/dropload.css" />
    <script src="http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/"></script>
    <title>上拉加载更多</title>

    </head>

    <body>
    <div class="content_02">
    <div class="lists">
    <!--<a href="javascript:;">
    <div class="free_content_box overh">
    <div class="fl left"><img src="../../../static/images/Free_insurance/code_03.png" /></div>
    <div class="fl mid">
    <p class="title">10万安心出游险</p>
    <p class="age">年龄:18-79&ensp;&ensp;保额:10万&ensp;&ensp;保障期限:30天</p>
    <p class="more overh">
    <a class="fl" href="javascript:;">所需金币:5金币</a>
    <a class="fr under" href="javascript:;"><span class="un">查看详情</span> ></a>
    </p>
    </div>
    </div>
    </a>-->
    </div>
    </div>

    <script type="text/javascript">
    //上拉加载更多
    var page = 0;
    $('.content_02').dropload({
    scrollArea: window,
    domDown: {
    domClass: 'dropload-down',
    domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
    domLoad: '<div class="dropload-load">正在加载</div>',
    domNoData: '<div class="dropload-noData">已加载完成</div>'
    },
    loadDownFn: function(me) {
    console.log('666')
    page++; // 每次请求,页码加1
    //获取产品信息列表渲染
    var data = {
    "page": page,
    "type_id": 1
    }
    console.log(page);
    //渲染列表
    $.post('http://fx.topmdrt.com/ZhongMinWang/listProduct', data, function(res) {
    console.log(res);
    var prod = res.data;
    if(res.errCode == "0") {
    var result = '';
    for(var i = 0; i < prod.products.length; i++) {

    result += '<a>kai</a>'

    if(prod.products.length < 5 && i == prod.products.length - 1) {  
    // 锁定 prod.products.length这里注意换成自己的长度 
    me.lock();
    // 无数据
    me.noData();
    break;
    }
    }
    //为了测试,延迟1秒加载
    setTimeout(function() {
    $('.lists').append(result);
    // 每次数据加载完,必须重置
    me.resetload();
    }, 1000);

    } else if(res.errCode == "1002") {
    $(".dropload-down").hide();
    console.log(res.errMsg);
    }
    }, 'json')
    threshold: 50
    }
    })
    </script>

    </body>

    </html>

  • 相关阅读:
    wikioi-1039-数的划分
    BNUOJ27873:A Special "Happy Birthday" Song!!!
    BaseAdapter 注意的关键点!
    装饰器模式
    【Leetcode】Same Tree
    科学-科研装置:大科学装置
    汉语-词语:言情
    Error-ONS-ASP.NET-IIS:0x000007FEFC8ABE0D (KernelBase.dll) (w3wp.exe 中)处有未经处理的异常: 0xE0434352
    协议-网络-TCP/IP:Telnet
    Error-ONS-ASP.NET-ISS:0x000007FEFD04BE0D (KernelBase.dll) (w3wp.exe 中)处有未经处理的异常: 0xE0434352
  • 原文地址:https://www.cnblogs.com/xiaohuizhang/p/8624267.html
Copyright © 2011-2022 走看看