入了很多下拉加载上拉刷新的插件，但是感觉都不好用，知道最近遇到这款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插件的更多相关文章

  1. isscroll插件 实现下拉加载 上啦刷新 转

    http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <m ...

  2. 微信小程序下拉加载和上拉刷新两种实现方法

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...

  3. 微信小程序之下拉加载和上拉刷新

    微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性       ...

  4. 微信小程序 无限加载 上拉加载更多

    加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...

  5. H5下拉刷新和上拉加载实现原理浅析

    前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...

  6. Android-自定义ListView下拉刷新与上拉加载

    效果图: 第一步:编写需要在ListView中增加头加载的布局文件,与底部加载的布局文件: 头布局文件: <?xml version="1.0" encoding=" ...

  7. 手把手教你实现Android RecyclerView上拉加载功能

    摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...

  8. 基于Zepto移动端下拉加载（刷新），上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  9. 移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

随机推荐

  1. [BJOI2019]勘破神机（第一类斯特林数，斐波那契数列）

    真的是好题,只不过强行多合一有点过分了…… 题目大意: $T$ 组数据.每个测试点中 $m$ 相同. 对于每组数据,给定 $l,r,k$,请求出 $\dfrac{1}{r-l+1}\sum\limit ...

  2. [LeetCode] 81. Search in Rotated Sorted Array II 在旋转有序数组中搜索之二

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  3. Oracle--缓冲区忙等待事件

    一,缓冲区等待事件 缓冲区忙等待是I/O-bound Oracle系统中比较常见的现象,特别是在Oracle STATSPACK报告的前五个忙等待的读(顺序/分散)系统中,如前5个定时事件: % 总和 ...

  4. 【报名中】【5G探索】深度揭秘5G核心技术与挑战，云+社区开发者大会北京站等你来！

    报名渠道(扫描下方二维码) 开发者专属福利 限量手办 现场幸运签到开发者即可获得,早到获奖几率更大 幸运抽奖 一等奖:1名 JBL LIVE650 BTNC无线主动降噪智能耳机 二等奖:3名 JBL ...

  5. ES6模版字符串

    传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b>' + basket ...

  6. 【网络知识之四】HTTP/2

    一.HTTP/1.1存在的问题 1.TCP 连接数限制2.线头阻塞 (Head Of Line Blocking) 问题3.Header 内容多,而且每次请求 Header 不会变化太多,没有相应的压 ...

  7. c# 在DataTable的第一列（指定列）的前面添加一列

    c# 在DataTable的第一列(指定列)的前面添加一列 dt.Columns.Add("ID").SetOrdinal(0)  

  8. VHR配置数据库开发环境

    一,vhr项目宏观分析 目的:实现机关和事业单位的人事管理信息系统. 软件使用的对象:面向机关和事业单位内人事信息管理人员和在职开发人员. [架构选型] vhr面向的群体范围并不大,并非属于互联网应用 ...

  9. 【题解】邻值查找 [CH1301]

    [题解]邻值查找 [CH1301] 传送门:邻值查找 \([CH1301]\) \([AcWing136]\) [题目描述] 给定一个长度为 \(n\) 的序列 \(A\),\(A\) 中的数各不相同 ...

  10. 【mybatis】mybatis一条sql更新两张数据表，mybatis关联更新多张数据表

    示例sql: <update id="receipt" parameterType="com.pisen.cloud.luna.ms.security.code.b ...