最新消息:

第108款插件:dropload.js移动端下拉刷新、上拉加载更多插件

高级页面 杨红伟 434浏览

[TOC]

(一)插件简介

移动端下拉刷新、上拉加载更多插件

(二)官方网站

https://github.com/ximan/dropload
>注:官方网站有二维码体验,也有DEMO!
注:https://github.com/ximan/dropload#示例-demo

(三)最简示例

本站代码: https://gitee.com/hongweizhiyuan/ijquery/tree/master/dropload
本站预览: http://www.ijquery.cn/plugin/dropload/

1、HTML

<div class="content">
    <div class="lists"></div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="../dist/dropload.css">
<script src="../dist/dropload.min.js"></script>

2、loadUpFn 下拉刷新

var page = 0;// 页数
var size = 5;// 每页展示5个
$('.content').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        page++;
        // 拼接HTML
        var result = '';
        $.ajax({
            type: 'GET',
            url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
            dataType: 'json',
            success: function(data){
                var arrLen = data.length;
                if(arrLen > 0){
                    for(var i=0; i<arrLen; i++){
                        result +=   data[i].title;
                    }
                // 如果没有数据
                }else{
                    me.lock();  // 锁定
                    me.noData();    // 无数据
                }
                // 为了测试,延迟1秒加载
                setTimeout(function(){
                    $('.lists').append(result); // 插入数据到页面,放到最后面
                    me.resetload(); // 每次数据插入,必须重置
                },1000);
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload(); // 即使加载出错,也得重置
            }
        });
    }
});

3、loadDownFn 上拉加载

注:将 loadUpFn 修改为 loadDownFn 即可!

(四)页码规则

1. 一次性加载全部数据

var counter = 0;
var num = 4;    // 每页展示4个
var pageStart = 0,pageEnd = 0;

//ajax中采用
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;

if(pageStart <= data.lists.length){
    for(var i = pageStart; i < pageEnd; i++){

    }
}

2. 点击一次请求一页数据

var page = 0;// 页数
var size = 5;// 每页展示5个

//ajax的URL采用
page++;
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,