×

学习下基于jQuery数据加载流

作者:天空2018.05.14来源:Web前端之家浏览:308评论:0
关键词:数据预加载
微信公众号

微信公众号

先前学习过一些基于jQuery数据加载流的知识,觉得方法很多,但是万变不离其宗,今天就回顾下最原始的数据预加载的功能。

实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。

但实际用起来却是很麻烦。由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看。

h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端的翻页。

基于按钮实现加载更多

最简单的就是给一个加载更多的按钮,如果还有数据,点击下加载更多,继续拉几条数据;直到没有更多数据了,隐藏加载更多按钮。

这里提前准备好数据。
演示数据格式:blog.json

{
    "list": [
        {
            "title": "这是title",
            "url": "http://www.xxx.com/x1.html",
            "desc": "摘要"
        },
        {
            "title": "这是title2",
            "url": "http://www.xxx.com/x2.html",
            "desc": "摘要"
        }]
}

页面html:

<div class="content">
    <div class="weui_panel weui_panel_access">
        <div class="weui_panel_hd">文章列表</div>
        <div class="weui_panel_bd js-blog-list">

        </div>
    </div>

    <!--加载更多按钮-->
    <div class="js-load-more">加载更多</div>
</div>
<script src="js/zepto.min.js"></script>

加载更多按钮样式:loadmore.css:

@charset "utf-8";

.js-load-more{
    padding:0 15px;
    width:120px;
    height:30px;
    background-color:#D31733;
    color:#fff;
    line-height:30px;
    text-align:center;
    border-radius:5px;
    margin:20px auto;
    border:0 none;
    font-size:16px;
    display:none;/*默认不显示,ajax调用成功后才决定显示与否*/
}

加载更多的js代码:

$(function(){    /*初始化*/
    var counter = 0; /*计数器*/
    var pageStart = 0; /*offset*/
    var pageSize = 4; /*size*/

    /*首次加载*/
    getData(pageStart, pageSize);    /*监听加载更多*/
    $(document).on('click', '.js-load-more', function(){
        counter ++;
        pageStart = counter * pageSize;

        getData(pageStart, pageSize);
    });
});

这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码,负责从服务端拉去数据。这里给个示例:

function getData(offset,size){
    $.ajax({
        type: 'GET',
        url: 'json/blog.json',
        dataType: 'json',
        success: function(reponse){            var data = reponse.list;            var sum = reponse.list.length;            var result = '';            /****业务逻辑块:实现拼接html内容并append到页面*********/

            //console.log(offset , size, sum);

            /*如果剩下的记录数不够分页,就让分页数取剩下的记录数
            * 例如分页数是5,只剩2条,则只取2条
            *
            * 实际MySQL查询时不写这个不会有问题
            */
            if(sum - offset < size ){
                size = sum - offset;
            }            /*使用for循环模拟SQL里的limit(offset,size)*/
            for(var i=offset; i< (offset+size); i++){
                result +='<div class="weui_media_box weui_media_text">'+ '<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+'<p class="weui_media_desc">'+ data[i].desc +'</p>'+                    '</div>';
            }

            $('.js-blog-list').append(result);            /*******************************************/

            /*隐藏more按钮*/
            if ( (offset + size) >= sum){
                $(".js-load-more").hide();
            }else{
                $(".js-load-more").show();
            }
        },
        error: function(xhr, type){
            alert('Ajax error!');
        }
    });
}

还是比较简单的。

基于滚动事件实现加载更多

上面我们通过按钮点击实现加载更多,整体过程还是比较简单的。这里,我提供另一种方法实现加载更多:基于于滚动(scroll)事件。

直接贴代码了:

$(function(){    /*初始化*/
    var counter = 0; /*计数器*/
    var pageStart = 0; /*offset*/
    var pageSize = 7; /*size*/
    var isEnd = false;/*结束标志*/

    /*首次加载*/
    getData(pageStart, pageSize);    /*监听加载更多*/  
    $(window).scroll(function(){        if(isEnd == true){            return;
        }        // 当滚动到最底部以上100像素时, 加载新内容
        // 核心代码
        if ($(<span class="hljs-built_in">document</span>).height() - $(this).scrollTop() - $(this).height()<100){
            counter ++;
            pageStart = counter * pageSize;

            getData(pageStart, pageSize);
        }
    });
});

可以看出,代码变化不大,主要看核心代码里的判断条件:当滚动到最底部以上100像素时, 加载新内容

业务逻辑getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的逻辑改成:

if ( (offset + size) >= sum){
    isEnd = true;//没有更多了}

就行了。

当然,这里面还有要优化的地方,例如:
如何防止滚动过快,服务端没来得及响应造成多次请求?

综合实例

通过上面的例子,显然第二种更好,不用去点击。但是第二个方法有个问题:
如果设置页面大小每次显示2条或3条(size=2),总记录是20,你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。

因此,我们可以把以上两种方法合在一起:
默认使用滚动事件实现加载更多,当显示数目太小不足以触发向下滚动加载更多的逻辑时,使用加载更多点击事件。

这里,我对加载更多这个行为进行简单的抽象,写了个简单的插件:
loadmore.js

/*
 * loadmore.js
 * 加载更多
 *
 * @time 2016-4-18 17:40:25
 * @author 飞鸿影~
 * @email jiancaigege@163.com
 * 可以传的参数默认有:size,scroll 可以自定义
 * */;(function(w,$){    var loadmore = { 
        /*单页加载更多 通用方法
         * 
         * @param callback 回调方法
         * @param config 自定义参数
         * */
        get : function(callback, config){            var config = config ? config : {}; /*防止未传参数报错*/

            var counter = 0; /*计数器*/
            var pageStart = 0;            var pageSize = config.size ? config.size : 10;            /*默认通过点击加载更多*/
            $(document).on('click', '.js-load-more', function(){
                counter ++;
                pageStart = counter * pageSize;

                callback && callback(config, pageStart, pageSize);
            });            /*通过自动监听滚动事件加载更多,可选支持*/
            config.isEnd = false; /*结束标志*/
            config.isAjax = false; /*防止滚动过快,服务端没来得及响应造成多次请求*/
            $(window).scroll(function(){                /*是否开启滚动加载*/
                if(!config.scroll){                    return;
                }                /*滚动加载时如果已经没有更多的数据了、正在发生请求时,不能继续进行*/
                if(config.isEnd == true || config.isAjax == true){                    return;
                }                /*当滚动到最底部以上100像素时, 加载新内容*/
                if ($(<span class="hljs-built_in">document</span>).height() - $(this).scrollTop() - $(this).height()<100){
                    counter ++;
                    pageStart = counter * pageSize;

                    callback && callback(config, pageStart, pageSize);
                }
            });            /*第一次自动加载*/
            callback && callback(config, pageStart, pageSize);
        },

    }

    $.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);

如何使用呢?很简单:

$.loadmore.get(getData, {    scroll: true,  //默认是false,是否支持滚动加载    size:7,  //默认是10    flag: 1, //自定义参数,可选,示例里没有用到});

第一个参数是回调函数,即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来:

function getData(config, offset,size){

    config.isAjax = true;

    $.ajax({
        type: 'GET',
        url: 'json/blog.json',
        dataType: 'json',
        success: function(reponse){

            config.isAjax = false;            var data = reponse.list;            var sum = reponse.list.length;            var result = '';            /************业务逻辑块:实现拼接html内容并append到页面*****************/

            //console.log(offset , size, sum);

            /*如果剩下的记录数不够分页,就让分页数取剩下的记录数
            * 例如分页数是5,只剩2条,则只取2条
            *
            * 实际MySQL查询时不写这个
            */
            if(sum - offset < size ){
                size = sum - offset;
            }            /*使用for循环模拟SQL里的limit(offset,size)*/
            for(var i=offset; i< (offset+size); i++){
                result +='<div class="weui_media_box weui_media_text">'+                        '<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+                        '<p class="weui_media_desc">'+ data[i].desc +'</p>'+                    '</div>';
            }

            $('.js-blog-list').append(result);            /*******************************************/

            /*隐藏more*/
            if ( (offset + size) >= sum){
                $(".js-load-more").hide();
                config.isEnd = true; /*停止滚动加载请求*/
                //提示没有了
            }else{
                $(".js-load-more").show();
            }
        },
        error: function(xhr, type){
            alert('Ajax error!');
        }
    });
}

基本上与最初写的是一样的。

总结

其实还有那种滑动加载流等等功能,上面只是最原始的数据加载方法,希望能帮助到大家!

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/dataLoad123124124124.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    谢谢楼主。。。。。。。。...

  • weblft

    表示不想加班,但是很难!!!...

  • 前端菜鸟

    也不全是我总结的哟,只是学习,大部分是来自大神的杰作。...

  • admin

    感觉不像前端菜鸟,学术很专啊,加油!...

  • admin

    可以的,底部有申请连接的。...

  • BudgetVM优惠码

    朋友交换链接吗...

  • 问我

    我...

  • admin

    是的,很难,可以笔记下来,便于查阅。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero