移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件，但是感觉都不好用，知道最近遇到这款dropload的插件，瞬间打开新世界的大门啊，无卡顿简单易用可配置
<!doctype html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- 该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接 -->
<meta content="telephone=no" name="format-detection">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 清除缓存 -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/dropload.min.js"></script>
<script src="js/fontSi.js"></script>
<script type="text/javascript" src="js/driverlist.js"></script>
<title>教练列表</title>
<link rel="stylesheet" href="css/dropload.css" />
<link href="css/both.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head> <body class="be">
<div class="content">
<div class="dirver-box">
<div class="driver-list">
<ul>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var page = 0;
var size = 5;
var count = 2;
//dropload
$(".driver-list").dropload({
scrollArea: window,
//上拉刷新数据
loadUpFn: function(me) {
$.ajax({
url: getv1 + '/index/institution/*********',
type: 'GET',
dataType: 'json',
data: {
inscode: '***********',
pageNo: 1,
pageSize: 5
},
success: function(res) {
//金牌教练
/*$(".driver-list ul").children('li').remove();*/
var coalen = res.data.coachs.length;
if (coalen > 0) {
count++;
var coachlist = "";
for (var j = 0; j < coalen; j++) {
var coname = res.data.coachs[j].name; //教练名字
var cophoto = res.data.coachs[j].photo; //教练照片
var cooverall = res.data.coachs[j].overall; //教练评分
var coteach = res.data.coachs[j].teachDate; //驾培教龄
var cotype = res.data.coachs[j].teachPermitted; //教学类型
if (cophoto != "") {
var driimg = '<img src="' + cophoto + '">';
} else {
var driimg = '<img src="img/driimg.png">';
}
/*教练星级*/
var coapf = "";
for (var i = 0; i < cooverall; i++) {
coapf += '<img src="img/starm.png">';
} for (var i = 0; i < 5 - cooverall; i++) {
coapf += '<img src="img/stark.png">';
} coachlist += '<li class="drilist clearfix"><div class="dri-img">' + driimg + '</div><div class="dri-info"><p class="dri-name">' + coname + '</p><span class="star">' + coapf + '</span><p class="dri-kind clearfix">教学类型:<span class="kind">' + cotype + '</span></p><p class="dri-kind clearfix">驾培教龄:<span class="teach">' + coteach + '年</span></p></div><div class="dri-enter"><span><img src="img/driento.png"></span></div></li>';
} }
//延迟1秒加载
setTimeout(function() {
$(".driver-list ul").append(coachlist);
//每次数据插入,必须重置
me.resetload();
//解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
}, 500)
},
error: function(xhr, type) {
alert('Ajax error!');
//即使加载出错,也得重置
me.resetload();
}
});
},
//下拉加载数据
loadDownFn: function(me) {
$.ajax({
url: getv1 + '/index/institution/********',
type: 'GET',
dataType: 'json',
data: {
inscode: '**********',
pageNo: count,
pageSize: 5
},
success: function(res) {
//金牌教练
var coalen = res.data.coachs.length;
if (coalen > 0) {
count++;
var coachlist = "";
for (var j = 0; j < coalen; j++) {
var coname = res.data.coachs[j].name; //教练名字
var cophoto = res.data.coachs[j].photo; //教练照片
var cooverall = res.data.coachs[j].overall; //教练评分
var coteach = res.data.coachs[j].teachDate; //驾培教龄
var cotype = res.data.coachs[j].teachPermitted; //教学类型
if (cophoto != "") {
var driimg = '<img src="' + cophoto + '">';
} else {
var driimg = '<img src="img/driimg.png">';
}
/*教练星级*/
var coapf = "";
for (var i = 0; i < cooverall; i++) {
coapf += '<img src="img/starm.png">';
} for (var i = 0; i < 5 - cooverall; i++) {
coapf += '<img src="img/stark.png">';
} coachlist += '<li class="drilist clearfix"><div class="dri-img">' + driimg + '</div><div class="dri-info"><p class="dri-name">' + coname + '</p><span class="star">' + coapf + '</span><p class="dri-kind clearfix">教学类型:<span class="kind">' + cotype + '</span></p><p class="dri-kind clearfix">驾培教龄:<span class="teach">' + coteach + '年</span></p></div><div class="dri-enter"><span><img src="img/driento.png"></span></div></li>';
} }
//如果没有数据
else {
//锁定
me.lock();
//无数据
me.noData();
}
//延迟1秒加载
setTimeout(function() {
$(".driver-list ul").append(coachlist);
//每次数据插入,必须重置
me.resetload();
}, 500)
},
error: function(xhr, type) {
alert('Ajax error!');
//即使加载出错,也得重置
me.resetload();
}
});
},
threshold : 50 });
</script>
</body> </html>
压缩文件在文件和百度云盘中
移动端好用的下拉加载上拉刷新插件 dropload插件的更多相关文章
- isscroll插件 实现下拉加载 上啦刷新 转
http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <m ...
- 微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...
- 微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 ...
- 微信小程序 无限加载 上拉加载更多
加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...
- H5下拉刷新和上拉加载实现原理浅析
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
- Android-自定义ListView下拉刷新与上拉加载
效果图: 第一步:编写需要在ListView中增加头加载的布局文件,与底部加载的布局文件: 头布局文件: <?xml version="1.0" encoding=" ...
- 手把手教你实现Android RecyclerView上拉加载功能
摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...
- 基于Zepto移动端下拉加载（刷新），上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- 移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
随机推荐
- requests--超时设置，代理设置，身份认证
超时设置 你可以告诉 requests 在经过以 timeout 参数设定的秒数时间之后停止等待响应.基本上所有的接口都应该使用这一参数.如果不使用,你的程序可能会永远失去响应 import requ ...
- 【CSP2019】树上的数
[CSP2019]树上的数 题面 洛谷 题解 我们设每个点上的编号分别为\(a_1,a_2...a_n\). 10pts ... 菊花 假设现在菊花中心编号是\(rt\),设你依次拆边\((p_1,r ...
- [LeetCode] 786. K-th Smallest Prime Fraction 第K小的质分数
A sorted list A contains 1, plus some number of primes. Then, for every p < q in the list, we co ...
- JaCoCo覆盖率计数器
覆盖率计数器 JaCoCo使用一组不同的计数器来计算覆盖率指标.所有这些计数器都是从Java类文件里获取信息,这些类文件包含Java 字节码指令和调试信息.即使没有可用源代码情况下,这种方法可以实时有 ...
- 不同种类的ICP算法
摘自<三维点云数据拼接中ICP及其改进算法综述>
- IDEA 最新破解方法，2019 版本已支持（持续更新，更新时间2019-05-14）
一.安装进入官网下载适合自己系统的版本,下载地址:https://www.jetbrains.com/idea/download/#section=windows 2. 安装中选择适合本机的64位 ...
- SpringBoot第十九篇：邮件服务
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11118340.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 邮件的重要 ...
- Docker remote API
Docker remote API 该教程基于Ubuntu或Debian环境,如果不是,请略过本文 Docker API 在Docker生态系统中一共有三种API Registry API:提供了与来 ...
- mgcp的alg功能实现
刚吃了一碗还算正宗的潮汕牛筋丸粿条和一颗卤蛋,算是给自己的生日礼物. 这一周工作只围绕了一个主题“mgcp的alg功能实现”. 1. 应用场景: 一台运行mgcp语音协议的终端设备,经过一台路由器到达 ...
- Hbase源码之 compact源码（二）
compact一中介绍了HBASE compact的调度流程,本篇文章主要介绍实际进行compact的过程.先从上文中的chore中接入,在HRegionserver中的compactChecker ...