内容展示容器 ion-content

2018-04-08 12:35:00
admin
原创
301
<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-content</h1>
  </ion-header-bar>

  <script type="text/javascript">
  //内联方式定义顶级Controller
  angular.module('example').controller('ContentController', function($scope) {
    //初始化内容区数据列表
    $scope.items = _.map(_.range(100),function(line){
                          return "这是第" + line+"行";});
    //on-scroll事件处理
    $scope.onScroll = function(){
      console.log("scrolling");
    };
    //on-scroll-complete事件处理
    $scope.onScrollComplete = function(scrollLeft,scrollTop){
      console.log(scrollLeft + "," + scrollTop);
    };
  });
  </script>
  <ion-content has-bouncing="false" on-scroll="onScroll()" 
  on-scroll-complete="onScrollComplete(scrollLeft,scrollTop)" 
  ng-controller="ContentController">
    <ul class="list">
      <li class="item" ng-repeat="item in items" >{{item}}</li>
    </ul>
  </ion-content>

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