AngularJS應用-滾動加載更多數據

本例demo是在寫仿掘金首頁時沒能解決的問題。
效果圖如下:
這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述

問題描述:

我在寫仿掘金首頁時,寫了一個自定義返回頂部指令,內部實現了滾動監聽,本想在裏面寫加載更多數據的代碼,對全局變量datas重新賦值,但是在獲取全局變量datas時不會獲取。
搜索相關資料瞭解了一下自定義指令中$scope作用域的問題,scope的可取值有false,true,{},寫了小 demo對這些基本有了瞭解,但對於我的問題還是無解。所以這個demo中的滾動監聽並沒有寫到自定義指令裏,而是寫到了控制器中。

核心文件引入:
-jquery.min.js
-angular.min.js
-bootstrap.min.css

頁面佈局:

<ul ng-controller="myCtrl">
        <li ng-repeat="data in datas">
            <article>
                <p>
                    <span>{{ data.author }}</span><span> · </span>
                    <span>{{ data.datetime }}</span><span> · </span>
                    <span>{{ data.category }} </span>
                </p>

                <h4>{{ data.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>
    </ul>

js文件

數據工廠:

.factory('dataList', ['$http', function($http){
  var baseUrl = 'http://127.0.0.1:3000';
  return {
    getData:function(titleName,page){
      return $http.get(baseUrl+'/home/'+titleName+"?page="+page);
    }
  }

}])

控制器:

.controller('myCtrl', ['$scope','dataList', function($scope,dataList){
    // 分類名稱(調用接口需要的字段)
  dataList.getData("recommend",0).then(function(res){

    $scope.datas = res.data.result;
    oldData = res.data.result;
  });

  jQuery(window).scroll(function(){
    var s = jQuery(window).scrollTop(),
        h = jQuery(window).height(),
        documentH = jQuery(document).height();
    if(s+h>=documentH){
        // loadMore
        alert("要去加載更多數據");
        dataList.getData("recommend",page+1).then(function(res){
            // 上一頁的數據
            //console.log(oldData);
            // 當前頁數據:res.data.result
            // 所有數據:進行了一個數組拼接
            var newData = oldData.concat(res.data.result);
            $scope.datas = newData;
        });
    }

  })

 }])
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章