移动端好用的下拉加载上拉刷新插件 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的 ...
随机推荐
- <LinkedList> 160
160. Intersection of Two Linked Lists 分别从AB循环两次.如果第一次没循环到,第二次就会在节点相遇. public class Solution { public ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
- [LeetCode] 34. Find First and Last Position of Element in Sorted Array 在有序数组中查找元素的第一个和最后一个位置
Given an array of integers nums sorted in ascending order, find the starting and ending position of ...
- centos6服务启动脚本及开机启动过程
centos6服务启动脚本 centos6的服务启动脚本都放在/etc/rc.d/init.d/下,/etc/init.d/是/etc/rc.d/init.d/的软链接: centos6的服务启动脚本 ...
- oracle--oracle18C环境配置（一）
一,硬件配置检查 使用以下命令确定服务器上的物理RAM大小: # grep MemTotal /proc/meminfo 如果系统中安装的物理RAM的大小小于所需的大小,则必须先安装更多内存,然后再继 ...
- mac os 使用 from scipy.misc import imread ImportError: cannot import name 'imread'
mac os 使用 from scipy.misc import imread ImportError: cannot import name 'imread' 问题1: 我原先安装了 pillow ...
- 【BZOJ5104】Fib数列（BSGS，二次剩余）
[BZOJ5104]Fib数列(BSGS,二次剩余) 题面 BZOJ 题解 首先求出斐波那契数列的通项: 令\(A=\frac{1+\sqrt 5}{2},B=\frac{1-\sqrt 5}{2}\ ...
- pod的yaml说明
apiVersion: v1 #指定api版本,此值必须在kubectl apiversion中 kind: Pod #指定创建资源的角色/类型 metadata: #资源的元数据/属性 name: ...
- 【07】Kubernets：资源清单（控制器 - DaemonSet）
写在前面的话 前面讲解了 Pod / ReplicaSet / Deployment 的资源清单,我们这里谈一下 DaemonSet 的资源清单. 之前说过,DaemonSet 控制器能够保证资源在每 ...
- Nginx-Tomcat 等运维常用服务的日志分割-logrotate
目录 一 .Nginx-Tomcat 等常用服务日志分析 Nginx 日志 Tomcat日志 MongoDB 日志 Redis 日志 二 .日志切割服务 logrotate 三.日志切割示例 Ngin ...