代码如下：入职代码修改接口及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. Mininet 系列实验（三）

    实验内容 基础 Mininet 可视化界面进行自定义拓扑及拓扑设备自定义设置,实现自定义脚本应用. 参考 Mininet可视化应用 实验环境 虚拟机: Oracle VM VirtualBox Ubu ...

  2. 面向对象高级编程（2）-使用@property

    使用@property 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻 ...

  3. (转)编码规范系列（一）：Eclipse Code Templates设置

    背景:长久以来,对java编程中的注释不甚理解.再次学习<疯狂JAVA讲义>基础,深深的感到自己基本功的不牢固.所以要做到事无巨细,好好修炼. 认识注释 常识 注释的作用: 回顾原有的代码 ...

  4. python入门：求1-2+3-4+5...99的所有数的和

    #!/usr/bin/env python # -*- coding:utf-8 -*- #求1-2+3-4+5...99的所有数的和 """ 给start赋值为1,su ...

  5. 适用于vue项目的打印插件

    此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...

  6. Error: cannot allocate vector of size 88.1 Mb问题

    这几天训练模型运行代码的时候,老是提示我说:Error: cannot allocate vector of size 88.1 Mb,只知道分配空间不足. 下面是查资料看到的一些回答: 一.这个是R ...

  7. U45490 还没想好名字的题Ⅱ

    这一题的环状板 Solution 暴力断环为链, 枚举起点跑 \(n\) 遍 \(DP\), 取最小值即可 Code #include<iostream> #include<cstd ...

  8. P1621 集合

    P1621 集合 题目描述 现在给你一些连续的整数,它们是从A到B的整数.一开始每个整数都属于各自的集合,然后你需要进行一下的操作: 每次选择两个属于不同集合的整数,如果这两个整数拥有大于等于P的公共 ...

  9. python 套接字之select poll epoll

    python下的select模块使用 以及epoll与select.poll的区别 先说epoll与select.poll的区别(总结) select, poll, epoll 都是I/O多路复用的具 ...

  10. day11 细节记忆

    单一职责:一个方法只做一件事. 值传递——java只有值传递. gender(性别) male(男)female(女) 自动生成的set.get方法中,布尔类型的get方法需要手工改为get(默认是i ...