移动端下拉刷新、上拉异步加载的插件以及轮播图插件

最新推荐文章于 2024-06-26 01:32:00 发布

_jant

最新推荐文章于 2024-06-26 01:32:00 发布

阅读量2.8k

点赞数

分类专栏： java 文章标签：移动 javascript 插件

本文链接：https://blog.csdn.net/u012318873/article/details/70047003

版权

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

https://pan.baidu.com/s/1eSOOm2m dropload+swiper

最近项目中用到了这两个插件，十分好用。这里简单介绍一下。

一.dropload
1.引入css和js

<link rel="stylesheet" href="../dropload.css">
<script src="../dropload.min.js"></script>

2.使用的核心代码

<body>
<div class="container">
    <ul class="list">
        <li>
        <p>张三</p> 
        <p>10086</p> 
        <p>本科</p> 
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var result="";
    $('.container').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'stu/queryallstu',
            dataType: 'json',
            success: function(data){
            for(var i=0;i<data.length;i++)
                result+='<li>'+
        '<p>'+data[i].name+'</p>'+ 
        '<p>'+data[i].phone+'</p>'+ 
        '<p>'+data[i].study+'</p>'+ 
        '</li>';
        $('.list').append(result);
                // 每次数据加载完，必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错，也得重置
                me.resetload();
            }
        });
    }
});
</script>