ion-infinite-scroll

2018-04-08 13:48:00
admin
原创
362
<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>
    <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 type="text/javascript">
angular.module('example').controller('DefaultController', function($scope,$window) {
  $scope.backHome = function(){
    console.log("back");
    $window.history.go(-1);
  };
});
</script>


<body ng-controller="DefaultController">
  <ion-header-bar class="bar-royal">
    <button class="button button-clear icon ion-ios-arrow-back" ng-click="backHome()">
    </button>  
    <h1 class="title">加载新内容ion-infinite-scroll</h1>
  </ion-header-bar>

<script type="text/javascript">
//内联方式定义ListController
angular.module('example').controller('ListController', function($scope,$timeout) {
  //初始化设置可加载更多数据的次数
  $scope.loadMoreDataTimesAllowed = 3;
  //判断是否可加载更多数据的函数
  $scope.moreDataCanBeLoaded = function(){
    return $scope.loadMoreDataTimesAllowed > 0;
  };  
  //初始化内容区数据列表
  $scope.items = _.map(_.range(20),function(line){
                        return "第0批数据,数据行" + line});
  //加载更多数据
  $scope.loadMoreLines= function(){
    $timeout(function(){
      $scope.items = _.concat($scope.items,_.map(_.range(5),function(line){
                          return "第"+ (4 - $scope.loadMoreDataTimesAllowed) 
                          +"批数据,数据行" + line}));
      $scope.loadMoreDataTimesAllowed = $scope.loadMoreDataTimesAllowed - 1;
      $scope.$broadcast('scroll.infiniteScrollComplete');
    },1000);
  };
});
</script>
<!-- 滚动列表容器 -->
<ion-content class="has-header" ng-controller="ListController">
  <ul class="list">
    <li class="item" ng-repeat="item in items">{{item}}</li>
    <li class="item" ng-if="!moreDataCanBeLoaded()">没有更多数据了...</li>
  </ul>
  <ion-infinite-scroll on-infinite="loadMoreLines()" ng-if="moreDataCanBeLoaded()">
  </ion-infinite-scroll>
</ion-content>

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