代码如下：入职代码修改接口及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. 【BZOJ1801】【Ahoi2009】chess 中国象棋

    Time Limit: 10 Sec Memory Limit: 64 MB Description 在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮. 请问有多少种放置方 ...

  2. debian7编译安装tengine添加lua和ldap模块

    1.安装开发环境 # aptitute update # aptitude install -y build-essential # aptitude install -y libldap2-dev ...

  3. 单点登录(三)-----实战-----cas server 源码下载和部署

    我们在上一篇文章中使用的是4.0版本的cas,4.0版本的有发布好的war包可以直接使用,那如果我们要使用更新的版本怎么办呢? 就需要下载源码自己编辑打包了. 步骤如下: 版本选择 我们在cas的gi ...

  4. bzoj 1825: [JSOI2010]蔬菜庆典

    1825: [JSOI2010]蔬菜庆典 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 112  Solved: 45[Submit][Status][ ...

  5. linux（ubuntu） mysql安装使用

    简单的安装一下: sudo apt-get install mysql-server apt-get isntall mysql-client sudo apt-get install libmysq ...

  6. java内存溢出xms xmx

    java内存堆栈不够用时我们会寻求java参数-Xms和-Xmx的帮助,网上也有许多前辈给出了例子,但很多人喜欢把-Xms和-Xmx的值设置成一样的,甚至我还见过有吧-Xms设的比-Xmx还要大(-X ...

  7. 2015/11/5用Python写游戏，pygame入门(5)：面向对象的游戏设计

    昨天的内容里有了运动的子弹,虽然我们只添加了一个子弹,但你可以看到我们需要记录子弹的x,y坐标,每次要更新它的坐标.如果我们想要有多颗子弹,就需要存储多个坐标.那时候处理起来就不显得那么简单,也许我们 ...

  8. psutil-3.4.2才是我的老系统(Windows XP)的菜

    psutil-3.4.2才是我的老系统(Windows XP)的菜 psutil 是一款跨平台的查看操作系统和进程信息的工具. 在一次卸载和重装了spyder包之后, spyder升级到了: 2.3. ...

  9. ElasticSearch关键概念

    Elasticsearch 添加索引 一个存储关联数据的地方 用来指向一个或者多个分片(shards)的逻辑命名空间(logical namespcase) 应用程序直接与索引通信 一个分片(shar ...

  10. Spring容器事件、自定义事件

    Spring容器内置事件,如容器的启动.停止.关闭.销毁等事件 <bean name="contextStartedHandler" class="com.nuts ...