這裡提前準備好資料。
演示資料格式：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!');
        }
    });
}