js加载更多

这里提前准备好数据。

演示数据格式：blog.json{    "list": [        {            "title": "这是title",            "url": "http://www.cnblogs.com/52fhy/p/5271447.html",            "desc": "摘要"        },        {            "title": "这是title2",            "url": "http://www.cnblogs.com/52fhy/p/4823390.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>加载更多的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!');        }    });}