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

来源：互联网发布：nginx lua 连接redis 编辑：程序博客网时间：2024/06/01 10:42

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>

这里写图片描述

重要：
1.使用下拉刷新的时候请注意滚动区域。否则不会生效。
2.autoLoad默认为true会自动触发ajax。如果在移动端需要用户手动上拉触发ajax，则需要将这个值设置为false；
3.上面参数图片为转载。

dropload插件在线演示：http://www.jq22.com/yanshi6960

Swiper有官方文档使用比较简单：http://www.swiper.com.cn

这里就不再过多作介绍了。

0 0