代码如下：入职代码修改接口及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>

【前端】上拉加载更多dropload.min.js的使用的更多相关文章

  1. dropload.min.js 下拉刷新后，无法上拉加载更多

    使用方法 1.引入文件 <script src="/app/media/js/dropload.min.js"></script> 111111111111 ...

  2. 移动端实现上拉加载更多(使用dropload.js vs js)

    做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...

  3. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

  4. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  5. RecyclerView实例-实现可下拉刷新上拉加载更多并可切换线性流和瀑布流模式（1）

    摘要 最近项目有个列表页需要实现线性列表和瀑布流展示的切换,首先我想到的就是上 [RecyclerView],他本身已经很好的提供了三种布局方式,只是简单做个切换应该是很简单的事情,如果要用Recyc ...

  6. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  7. mui的上拉加载更多 下拉刷新 自己封装的demo

    ----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

随机推荐

  1. 【BZOJ4916】神犇和蒟蒻 解题报告

    [BZOJ4916]神犇和蒟蒻 Description 很久很久以前,有一群神犇叫sk和ypl和ssr和hjh和hgr和gjs和yay和xj和zwl和dcx和lyy和dtz和hy和xfz和myh和yw ...

  2. DUBBO - 分布式框架

    http://dubbo.io/ http://dubbo.io/User+Guide-zh.htm#UserGuide-zh-%E5%85%A5%E9%97%A8

  3. Java中的三目运算符可能出现的问题

    你真的了解Java中的三目运算符吗? 原创 2018-04-27 刨根问底的 Hollis Hollis Hollis 微信号 hollischuang 功能介绍 一个对Coding有着独特追求的人. ...

  4. Java EE之Servlet

    1.创建Servlet类 Servlet在Java EE API规范中的定义: Servlet是一个运行在Web服务器中的Java小程序.Servlet将会接收和响应来自Web客户端的请求,使用HTT ...

  5. easyUI datetimebox 自定义显示格式

    http://blog.csdn.net/littlewolf766/article/details/7329123 项目里需要显示自定义显示格式,比如只显示yyy,yyyy-mm,yyyy-mm-d ...

  6. Service Fabric Placement and Load Balancing

    作者:潘罡 (Van Pan)@ Microsoft 什么是PLB (Placement and Load Balancing) 介绍FM的上文中,我们提到了PLB. 这个组件和FM协同工作,为FM提 ...

  7. 利用Snapshot快速跨Region迁移服务器

    当你需要对现有的网站进行跨区域迁移,或者是部署DR Site的时候,又不希望重新部署应用,有什么好办法呢?其实你可以利用Azure的磁盘snapshot进行磁盘级的复制,这样可以减少很多部署应用的时间 ...

  8. python的函数介绍 位置参数 关键字参数 默认参数 参数组 *args **kwargs

    1.数学意义的函数与python中的函数 数学意义的函数 y = 2*3+1 x =3 y =7 x是自变量,y是因变量 2.python中定义函数的方法 一个函数往往都是为了完成一个特定的功能而存在 ...

  9. openstack指南

    1.openstack官网 http://www.openstack.org/ 2.openstack源码地址 https://github.com/openstack 3.openstack的pac ...

  10. NDKr10的各种BUG

    NDKr10有几个BUG,所以推荐使用NDKr9 bug1:不支持srand() bug2: 链接异常,找不到stpcpy()