前端項目知識點整理－滾動加載更多

這裏只對滾動加載更多這一知識點進行整理

效果展示：

首先說一下在寫demo的時候遇見的問題：

• jQuery版本引入問題
• chrome瀏覽器請求網絡時跨域問題

我首次引入的是jQuery v1.9.0，運行時報錯如下：
Uncaught Error: Syntax error, unrecognized expression:這裏是用Underscore定義的一個模版內容，具體模版內容見代碼。
後來改用了jQuery v1.12.4，運行正常。

搜索了一下問題，找了一下可能的原因，發現可能是jQuery v1.9.0不支持往一個div中append一個對象，而我將模版封裝成了一個對象，模版作爲字符串append進去的時候完全沒有問題。所以引入的時候最好還是用最新版本，避免不必要的錯誤。

在chrome上運行時，報如下錯誤：
Failed to load http://127.0.0.1:3000/home/recommend?page=0: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

所以在服務器端send數據之前添加了一個header
res.setHeader(“Access-Control-Allow-Origin”, “*”);
問題就解決了。

---

核心文件引入：
- jquery.min.js
- underscore-min.js
- bootstrap.min.css
頁面佈局：

<ul class="box"></ul>

部分代碼塊如下:

定義的模版：

<script type="text/template" id="tpl">
        <li >
            <article>
                <p>
                    <span>{{= author}}</span><span> · </span>
                    <span>{{= datetime }}</span><span> · </span>
                    <span>{{= category }} </span>
                </p>

                <h4>{{= title }}</h4>
                <div class="btn-group" role="group" aria-label="...">

                    <button type="button" class="btn btn-default btn-xs">
                        <span class="glyphicon glyphicon-heart"></span>
                          4
                    </button>
                     <button type="button" class="btn btn-default btn-xs">
                        <span class=" glyphicon glyphicon-thumbs-down"></span>
                          1
                    </button>
                </div>
                <div class="btn-group share" role="group" aria-label="...">

                    <button type="button" class="btn btn-default btn-xs">
                        <span class="glyphicon glyphicon-share"></span>
                    </button>
                     <button type="button" class="btn btn-default btn-xs">
                        <span class="glyphicon glyphicon-star"></span>
                    </button>
                </div>           
            </article>
        </li>
    </script>

封裝請求數據的方法：

function getData(page){
        $.ajax({
            "url":"http://127.0.0.1:3000/home/recommend?page="+(nowpage-1),
            "type":"get",
            "success":function(data,result){
                 // 打印數據
                console.log(data);
                var datas = data.result;
                // 數據迭代
                iterator(0);
                function iterator(i){
                    var zidian = compiled(datas[i]);
                    // $(zidian)可以將字符串轉化成對象
                     $(".box").append($(zidian));
                    //$(".box").append(zidian);
                    iterator(i+1);
                }
            }
        })

渲染數據：

// 得到模版內容
var tpl = $("#tpl").html();
// 模版函數
var compiled = _.template(tpl);
var nowpage =1;

getData(nowpage);

滾動監聽：

$(window).scroll(function() { 
        var scrollTop = $(this).scrollTop(),
        // 文檔高度
            scrollHeight = $(document).height(),
            windowHeight = $(this).height();  
        var positionValue = (scrollTop + windowHeight) - scrollHeight;  
         if (positionValue >= 0) {  
                 // load more
                // alert("現在要取請求更多數據");
                  getData(++nowpage);

          }else{

          }
    });