Question

我的情况是我制作了一个ion-view，用了五页。这些页面通过“tab like”菜单导航，该菜单不使用ion-tabs或类似的任何内容（实际上不是问题的重点）。我现在想为Ionics scroll-delegate使用动态值，但它似乎不起作用。我已经阅读了关于同一主题的其他问题（关于SO和Ionic论坛），但它们是Ionic 1.0.0左右时代的旧主题，并且提供的解决方案在今天不起作用。

我的ion-view模板：

<ion-view>
  <ion-content delegate-handle="{{category.id}}" on-scroll="scrollEvent(category.id)">
    <h1>{{category.title}}</h1>
  </ion-content>
</ion-view>

我的控制器scrollEvent功能：

$scope.scrollEvent = function(category) {
  var scrollamount = $ionicScrollDelegate.$getByHandle(category).getScrollPosition().top;
  if (scrollamount > 180) {
    console.log('scroll amount > 180');
  } else {
    console.log('scroll amount < 180');
  }
};

这会在控制台中显示以下警告：

委托句柄“12345”找不到与delegate-handle =“12345”对应的元素！没有调用getScrollPosition（）！可能的原因：如果您立即调用getScrollPosition（），并且您的delegate-handle =“12345”元素是您的控制器的子元素，那么您的元素可能尚未编译。在调用getScrollPosition（）时调用$ timeout，然后重试。

我尝试在delegate-handle $ionicView.enter和$ionicView.afterEnter上提供$ionicView.loaded值。我已经给出了10秒等的功能超时，但它没有帮助。

如果我手动设置delegate-handle并运行它，它就可以了。我需要动态设置它，因为不同的视图应该有自己的delegate-handle，以便我能够将它们彼此分开并相应地设置滚动位置等。此类别的ID也可能会发生变化。

Ionic在浏览页面时会制作这些“窗格”（缓存它们），这样我就可以看到并检查句柄是否正确。

<ion-view nav-view="active" style="opacity: 0.9; transform: translate3d(-33%, 0px, 0px);">
  <ion-content delegate-handle="12345" on-scroll="scrollEvent(category.id)">
    <h1>Category 12345 title</h1>
  </ion-content>
</ion-view>

我不想改变Ionics代码本身。

我做了一个简单的演示，其中有类似的功能供你玩，可以解决这个问题：http://codepen.io/thepio/pen/xORdNG

有些人可能会说，显然我是从http请求中获取真实应用程序中的数据（类别等）。

Answer 1

离子的delegate-handle指令的问题是它实际上需要一个字符串作为输入。因此，当您编写{{myModel}}时，它不会使用模型的值进行插值，它需要＆＃34; {{myModel}}＆＃34;作为委托句柄标识符。因此，如果我们在等待离子团队解决此问题的同时不想改变离子核的任何内容，那么这就解决了这个问题：

将id放在ion-content标记上的方式与分配委托句柄的方式相同。即<ion-content id="{{category.id}}"></ion-content>

然后获取当前视图的处理程序的实际实例并使用它，它将始终以这种方式准确（因为我们使用id属性作为标识符使用以下代码：

    //the idea is to get the specific instance of the handle element using ids, that's what we do in the function below in our controller.
   $scope.getScrollPositionEpicly = function (category) {
        var instances = $ionicScrollDelegate["_instances"];
        //get all the instances that ionic scroll delegate is handling 
        var instance = null;
        for(var index in instances){
          if(instances[index].$element[0].id === category){ //match the instance that we're targeting using the id that we provided , i.e. the current view/handle/id on ion-content
            instance = instances[index];
          }
        }
        if(instance && instance.getScrollPosition){
          return instance.getScrollPosition(); //return the correct position
          console.log(JSON.stringify(instance.getScrollPosition()));
        }
        return {top:0,left:0}; //fallback case/default value so execution doesn't break
   }
  $scope.scrollEvent = function(category) {
    // var scrollamount = $ionicScrollDelegate.$getByHandle(category).getScrollPosition().top;
    var scrollPosition = $scope.getScrollPositionEpicly(category);
    var scrollAmount = (scrollPosition.top || 0);
    console.log("category : " + category);
    console.log("scrollPosition : " + JSON.stringify(scrollPosition));
    if (scrollAmount > 10) {
      console.log('scroll amount > 10');
    } else {
      console.log('scroll amount < 10');
    }
  };

DEMO：这里是代码的working demo（检查控制台输出）

希望这有帮助。

离子滚动委托的动态值

1 个答案: