（补充）ionic js 指令布局的小技巧

最新推荐文章于 2024-08-17 11:37:44 发布

靈吾靈

最新推荐文章于 2024-08-17 11:37:44 发布

阅读量1k

点赞数

分类专栏： ioinc

ioinc 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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>