ion-content滚动常用事件和组件

2018-04-16 11:38:00
admin
原创
369
<html ng-app="example">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title> </title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
        <script src="https://cdn.bootcss.com/lodash.js/4.3.0/lodash.js"></script>

    </head>
	<style>
	</style>
    <script type="text/javascript">
    angular.module('example', ['ionic'])
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        } 
      });
    });
  </script>
<script>
angular.module('example').controller('DefaultController', function($scope,$http) {
 $scope.items=[
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 ];
	$scope.onScroll = function(){
		console.log("scrolling");
	}
	$scope.doRefresh = function(){
		//console.log("pull refreshing");
		$http.get('http://code.ybao.org/demo/src/item.json')
		  .success(function(newItems){
			$scope.items=newItems;
		}).finally(function(){
			$scope.$broadcast('scroll.refreshComplete');
		});
	}
	$scope.loadMoreData = function(){
		//console.log("pull refreshing");
		$http.get('http://code.ybao.org/demo/src/item.json')
		  .success(function(newItems){
			$scope.items=_.concat($scope.items,newItems);
		}).finally(function(){
			$scope.$broadcast('scroll.infiniteScrollComplete');
		});
	}
	$scope.moreDataCanBeLoaded = function(){
		return true;
	}									   
});
</script>


<body ng-controller="DefaultController">
<ion-header-bar class=bar-positive align-title=center>
	<h1 class=title>Title</h1>
	</ion-header-bar>
	<ion-content on-scroll="onScroll()">
		<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
		<ion-list>
			<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
		</ion-list>
		<ion-infinite-scroll 
		   ng-if="moreDataCanBeLoaded()"
		   icon="ion-loading-c"
		   on-infinite="loadMoreData()"></ion-infinite-scroll>
		</ion-infinite-scroll>
	</ion-content>

  
</body>
</html>				
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227