js頁面中實現加載更多功能

　　分頁-如何實現加載更多功能，目前的在很多網站上使用的加載更多功能中，使用最多的是iscroll.js實現的上拉加載更多、下拉刷新功能。但是iscroll.js本身並沒有集成加載更多的功能，需要進行自行擴展。

　　最簡單的就是給一個加載更多的按鈕，實現假分頁加載更多，也就是頁面上是全部的數據，只是按照頁面顯示要求，自己規定顯示部分范圍，其余隱藏。如果還有數據，點擊下加載更多，繼續拉幾條數據；直到沒有更多數據了，就會顯示加載完畢。

1. 加載時顯示“正在加載……”
2. 數據太多想初次加載部分數據，在底部加上“加載更多”按鈕
3. 直到沒有更多數據了，就會顯示加載完畢。

　　其中 class="loading" 中的loading為自己隨便命名，在這里以在js頁面上通過c標簽的foreach 方法循環遍歷企業名字 來做演示

<div class="loading">
                    <div class="hidden">
                        <div class="horisontalpadding">
                            <ul class="products product-thumb-info-list">

                             <--想要實現加載的內容顯示在下面即可,同時注意使用li標簽-->
                                <c:forEach var="company" items="${companys}">
                                    <li class="product searchproduct" style="width: 30%;"><a
                                            <div
                                                style="width: 350px; height: 30px; border: 3px solid #CCC; text-align: center; border-radius: 40                                                   px;">
                                                <h4 class="company.name" style="color: #030303">${company.name}</h4>
                                            </div>
                                    </a></li>
                                </c:forEach>



                            </ul>
                        </div>
                    </div>
                    <ul class="list">數據加載中，請稍后...
                    </ul>
                    <div class="space30"></div>
                    <div style="display: none;" data-bind="visible: isProductsLoading">
                        <div id="pager_loading"></div>
                    </div>
                    <div class="container">
                        <div class="alert alert-info text-center">
                            <a href="javascript:;" onClick="loading.loadMore();"><div
                                    class="more">加載更多企業</div></a>
                        </div>
                    </div>
                </div>

下面顯示script代碼部分

<script>
        var _content = []; //臨時存儲li循環內容
        var loading = {
            _default : 6, //默認顯示圖片個數
            _loading : 6, //每次點擊按鈕后加載的個數
            init : function() {
                var lis = $(".loading .hidden li");
                $(".loading ul.list").html("");
                for (var n = 0; n < loading._default; n++) {
                    lis.eq(n).appendTo(".loading ul.list");
                }
                $(".loading ul.list img").each(function() {
                    $(this).attr('src', $(this).attr('realSrc'));
                })
                for (var i = loading._default; i < lis.length; i++) {
                    _content.push(lis.eq(i));
                }
                $(".loading .hidden").html("");
            },
            loadMore : function() {
                var mLis = $(".loading ul.list li").length;
                for (var i = 0; i < loading._loading; i++) {
                    var target = _content.shift();
                    if (!target) {
                        $('.loading .more').html("<p>全部加載完畢...</p>");
                        break;
                    }
                    $(".loading ul.list").append(target);
                    $(".loading ul.list img").eq(mLis + i).each(function() {
                        $(this).attr('src', $(this).attr('realSrc'));
                    });
                }
            }
        }
        loading.init();
    </script>

　　這種是最簡單的方法不需要引入任何插件，直接在js頁面上添加script代碼即可。

　　這是我第一次使用博客與大家分享我的代碼，請各位前輩不吝賜教，多多指點，有什么問題都可以給我指出，不勝感激。