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;
        });
    }

  })

 }])
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值