代码如下：入职代码修改接口及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. Eclipse – Java.Lang.OutOfMemoryError: Java Heap Space(转)

    In Eclipse IDE, if your program is consuming a lot of memory (loading big data) like this : List< ...

  2. 解题：Poetize6 IncDec Sequence

    题面 差分原数列得到差分数组$dif$,这样对于$dif[2]->dif[n]$会多出来两个“空位置”$1$和$n+1$.然后区间加减就变成了使一个位置$+1$,另一个位置$-1$(可以对“空位 ...

  3. RF - 完整用例展示

    将重复性动作进行封装为keyword,在测试用例中调用keyword. *** Settings *** Documentation Simple example using SeleniumLibr ...

  4. Python word_cloud 样例 标签云系列（三）

    转载地址:https://zhuanlan.zhihu.com/p/20436642word_cloud/examples at master · amueller/word_cloud · GitH ...

  5. Chapter 2(算法)

    附件列表 算法.jpg

  6. python pop()

    pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值. obj -- 可选参数,要移除列表元素的索引值,不能超过列表总长度,默认为 index=-1,删除最后一个列表值 l ...

  7. Go_12：Go命令行处理

    概述 常用的命令行参数解析有 2 种方式,一种是不带参数标签直接接上参数值,另外一种就是带有标签的参数解析.第一种我们可以直接通过 os 包提供的原始方法获取,第二种我们需要通过 flag 包来解析获 ...

  8. 最短路径算法的实现（dijskstra）：Python

    dijskstra最短路径算法步骤: 输入:图G=(V(G),E(G))有一个源顶点S和一个汇顶点t,以及对所有的边ij属于E(G)的非负边长出cij. 输出:G从s到t的最短路径的长度. 第0步:从 ...

  9. Windows 2012 R2 安装net4.6.1

    下载并安装Net4.6.1 根据提示下载如下,并安装 https://support.microsoft.com/zh-cn/help/2919355/windows-rt-8-1--windows- ...

  10. 转：iOS7导航栏遮盖问题的解决

    在开发iOS7的界面的时候,有时候你会发现UIViewController里的subView有时会被导航栏遮盖,原因是iOS7鼓励全屏布局,UIViewController中的self.view的坐标 ...