摆脱jquery!angularjs利用指令简单实现滚动翻页

移动开发一个很重要的问题是翻页操作,而现在的主流都是滚动翻页,以往都是用jquery的插件进行实现。用了angularjs之后,要逐步减轻对jquery的依赖。

滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight

代码

指令

1
2
3
4
5
6
7
8
9
10
app.directive('whenScrolled'function(
  return function(scope, elm, attr
    var raw = elm[0]; 
    elm.bind('scroll'function(
      if (raw.scrollTop+raw.offsetHeight >= raw.scrollHeight) { 
        scope.$apply(attr.whenScrolled); 
      } 
    }); 
  }; 
});

控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$scope.loadMore = function(
    if ($scope.currentPage < $scope.pages) { 
      $scope.currentPage++; 
      if ($scope.busy) { 
        return false
      } 
      $scope.busy = true
      $http.get('/api.php?r=site/list/page/'+$scope.currentPage+'/limit/'+$scope.limit).success(function(data
        $scope.busy = false
        for (var i in data.data) { 
          $scope.newses.push(data.data[i]); 
        } 
        $scope.pages = Math.ceil(data.total/$scope.limit); 
        $rootScope.title = '首页 - 微文章'
      }); 
    } 
  };

视图

1
2
3
<div when-scrolled="loadMore()">
//内容处理逻辑
</div>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×