代码如下：入职代码修改接口及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. 【CF938G】Shortest Path Queries（线段树分治，并查集，线性基）

    [CF938G]Shortest Path Queries(线段树分治,并查集,线性基) 题面 CF 洛谷 题解 吼题啊. 对于每个边,我们用一个\(map\)维护它出现的时间, 发现询问单点,边的出 ...

  2. Alpha 冲刺 —— 十分之六

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试服务器并行能力 学习MSI.CUDA ...

  3. 一步步创建第一个Docker App —— 1. 背景介绍

    原文:https://docs.docker.com/engine/getstarted-voting-app/#/docker-stacks-and-services 你将会学习什么    本文创建 ...

  4. 遇到问题----java----myeclipse或者eclipse发布的项目时配置文件不更新或者无配置文件

    myeclipse或者eclipse发布的项目时配置文件不更新或者无配置文件. 正常的web项目有目录 src/main/resources 和 src/main/java 这两个目录默认在编译发布时 ...

  5. 深度学习网络层之 Pooling

    pooling 是仿照人的视觉系统进行降维(降采样),用更高层的抽象表示图像特征,这一部分内容从Hubel&wiesel视觉神经研究到Fukushima提出,再到LeCun的LeNet5首次采 ...

  6. laravel Collection mapToDictionary 例子

    源码 示例 <?php require __DIR__ . '/bootstrap/app.php'; $arr = [ [ 'name' => 'John', 'age' => 2 ...

  7. 用递归的方法求一个数组的前n项和

    用递归的方法求一个数组的前n项和 public class Demo1 { /* * 用递归的方法求一个数组的前n项和 */ public static void main(String[] args ...

  8. linux driver ------ 交叉工具链（cross toolchain）

    在 ARM Linux 的开发中,人们趋向于使用 Linaro(http://www.linaro.org/)工具链团队维护的 ARM 工具链,它以每月一次的形式发布新的版本,编译好的可执行文件可以网 ...

  9. Shell记录-Shell命令（文件查找）

    常见解压/压缩命令 tar文件格式解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!) .gz文件格式解压1:g ...

  10. Nginx location 配置用法及正则例子

    Nginx location 配置语法     1. location [ = | ~ | ~* | ^~ ] uri { ... }     2. location @name { ... }   ...