<body ng-controller="firstCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-infinite-scroll</h1>
</ion-header-bar>
<ion-content>
<ion-infinite-scroll on-infinite="load_more();" icon="ion-load-a" distance="1%" immediate-check="true">
<!-- 当immediate-check=“false” 的时候 内容区只加载默认数据 $scope.items = ['1111','22222'];
只有在刷新的时候回加载load_more()函数-->
<!--当immediate-check=true 的时候 ,内容区如果数据不够的话，会一直调用load_more()函数，一直铺满这个内容区 -->
</ion-infinite-scroll>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul>
</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope,$timeout){
$scope.items = ['1111','22222'];
var base = 0;
$scope.load_more = function(){
$timeout(function(){
for(var i=0;i<3;i++,base++)
$scope.items.push(["item ",base].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete");
},500);
};
});
</script>
<span style="font-family: Arial, Helvetica, sans-serif;"><script></span>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope,$timeout,$ionicScrollDelegate){
$scope.goTop = function(){
$ionicScrollDelegate.scrollTop(true);
a = $ionicScrollDelegate.getScrollPosition();
};
$scope.goButtom = function(){
a = $ionicScrollDelegate.getScrollPosition();
$scope.scrollTo(10,a.top)
console.log(a);
}
//控制置顶的效果
var base = 0;
$scope.items = [];
$scope.load_more = function(){
$timeout(function(){
for(var i=0;i<3;i++,base++)
$scope.items.push(["item", base].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete")
},500)
}
})
</script>
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
