$ ionicScrollDelegate.getScrollPosition无法正常工作

我正在尝试获取Scroll上元素的位置。但是，当我使用on-scroll函数给出的错误 $ ionicScrollDelegate.getScrollPosition不是一个函数。

我的HTML代码是 -

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

     <title>Ionic Template</title> 

     <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet"> 
      <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script> 
     </head> 
     <body ng-controller="MyCtrl"> 

      <ion-header-bar class="bar-positive"> 
      <h1 class="title">{{myTitle}}</h1> 

      </ion-header-bar> 

      <ion-content padding="true"> 
      <div class="row"> 
       <div class="col"><h2>Swipe : {{data.swipe}}</h2></div> 
       <div class="col"><h2>Swipe Right : {{data.swiperight}}</h2></div> 
       <div class="col"><h2>Swipe Left : {{data.swipeleft}}</h2></div> 
       <div class="col"><h2>DoubleTap : {{data.doubletap}}</h2></div> 
       <div class="col"><h2>Tap : {{data.tap}}</h2></div> 
       <div class="col"><h2>Scroll : {{data.scroll}}</h2></div> 
      </div> 
      <div class="row"> 
       <div detect-gestures gesture-type="swipe" class="col swipe-box"> 
       <p> 
        Swipe Left Or Right Direction Inside Me! 
       </p> 
       </div> 

       <div detect-gestures gesture-type="swiperight" class="col swipe-box"> 
       <p> 
        Swipe Right Inside Me! 
       </p> 
       </div> 

       <div detect-gestures gesture-type="swipeleft" class="col swipe-box"> 
       <p> 
        Swipe Left Inside Me! 
       </p> 
       </div> 

       <div detect-gestures gesture-type="doubletap" class="col swipe-box"> 
       <p> 
        Double Tap Me 
       </p> 
       </div> 

       <div detect-gestures gesture-type="tap" class="col swipe-box"> 
       <p> 
        Tap Me 
       </p> 
       </div> 

       <div detect-gestures gesture-type="scroll" class="col swipe-box"> 
       <ion-scroll direction="y" on-scroll="getScrollPosition();"> 
            <p> 
        Scroll Me 
       </p> 

       </ion-scroll> 
       </div> 

      </div> 

      </ion-content> 

     </body> 
     </html>

的js代码 -

angular.module('ionicApp', ['ionic']) 

.controller('MyCtrl', function($scope, $timeout,$ionicScrollDelegate) { 
    $scope.myTitle = 'Template'; 

    $scope.data = { 
    swipe : 0, 
    swiperight: 0, 
    swipeleft: 0, 
    tap : 0, 
    doubletap : 0, 
    scroll : 0 
    }; 

    $scope.reportEvent = function(event) { 
    console.log('Reporting : ' + event.type); 

    $timeout(function() { 
     $scope.data[event.type]++; 
    }) 
    } 
$scope.getScrollPosition = function() { 
     $timeout(function() { 
     $scope.data1 = $ionicScrollDelegate.getScrollPosition().top; 
    }); 
    console.log($scope.data1); 
    }; 

}) 

.directive('detectGestures', function($ionicGesture) { 
    return { 
    restrict : 'A', 

    link : function(scope, elem, attrs) { 
     var gestureType = attrs.gestureType; 

     switch(gestureType) { 
     case 'swipe': 
      $ionicGesture.on('swipe', scope.reportEvent, elem); 
      break; 
     case 'swiperight': 
      $ionicGesture.on('swiperight', scope.reportEvent, elem); 
      break; 
     case 'swipeleft': 
      $ionicGesture.on('swipeleft', scope.reportEvent, elem); 
      break; 
     case 'doubletap': 
      $ionicGesture.on('doubletap', scope.reportEvent, elem); 
      break; 
     case 'tap': 
      $ionicGesture.on('tap', scope.reportEvent, elem); 
      break; 
     case 'scroll': 
      $ionicGesture.on('scroll', scope.reportEvent, elem); 
      break; 
     } 

    } 
    } 
})

请检查错误。

这里是一个codepen链结LINK TO CODE

来源

2015-10-21 RHUL

我怀疑你的$IonicScrollDelegate还不可用，因为离子没有完全被你的代码执行时加载。

请尝试在离子准备好监听器中引导您的应用程序。

为此，请从<html>标记中删除ng-app部分，以停止Angular自动引导。

接着，添加离子ready事件监听器JavaScript文件：

window.ionic.Platform.ready(function() { 
    angular.bootstrap(document, ['ionicApp']); 
});

此代码等待离子是满载，加载你的AngularJS应用程序之前。

来源

2015-10-21 13:43:59 PeterPan

$ ionicScrollDelegate.getScrollPosition无法正常工作

回答

相关问题