Question

我试图向下滚动到delegate-handle =＆＃34; start＆＃34;离子载荷。当我尝试运行它时，我在控制台中收到此消息。

Delegate for handle "small" could not find a corresponding element with delegate-handle="small"! scrollTop() was not called!

可能的原因：如果您立即调用scrollTop（），并且您的元素使用delegate-handle =＆＃34; small＆＃34;是您的控制器的子项，那么您的元素可能尚未编译。在你的scrollTop（）调用周围加上$ timeout，然后再试一次。

我的代码看起来像这样，有人可能会看到什么问题吗？

$timeout(function() {
     $ionicScrollDelegate.$getByHandle('start').scrollTop();

}, 10);

如果我使用$ ionicScrollDelegate.scrollBottom（），它将滚动到底部，因此它必须是特定功能的问题。

html代码

     <ion-view title="Kalender">
   <ion-content>
    <ion-list ng-repeat="activity in calendar">

       <div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
        <div class="header-divider-small">{{activity.year}}</div>
        <div class="header-divider">{{activity.date_divider}}</div>
      </div>

        <div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
            <span class="header">{{activity.name}}</span>
              <br />
              <span class="text">{{activity.time}} - {{activity.place}}</span>
              <a class="button button-icon icon {{activity.icon}} right not-selected"></a>
        </div>


    </ion-list>
    <div delegate-handle="start"></div>
  </ion-content>
</ion-view>

感谢。

Answer 1

Ionic 1.0.0-beta14与getByHandle()有一些奇怪的问题，所以你可以这样做：

$timeout(function() {
    var startHandle = _.find($ionicScrollDelegate._instances, function (s) {
        return s.$$delegateHandle === "start";
    });
    startHandle.scrollTop();
});

Solution source at forum.ionicframework.com

Answer 2

我认为对于委托句柄在这里做什么存在误解。委托句柄是一种命名滚动/内容容器的方法。您可以将其视为一种为<ion-content>容器提供唯一名称的方法，该名称可以在以后与该服务一起使用。在单个视图上可以有多个<ion-content>容器，这就是命名是必要的原因。如果您只有一个滚动区域或者没有指定句柄，那么它只使用它找到的第一个视图。

您想要滚动到应用程序中的特定位置，这是$ionicScrollDelegate.anchorScroll('element-id');的工作。通过一些修改，在这里查看您的代码。我已将委托句柄放在正确的位置，然后使用anchorScroll方法自动滚动到页面中的该ID。

<强>标记

<ion-view title="Kalender">
   <ion-content delegate-handle="kalendar">
    <ion-list ng-repeat="activity in calendar">

       <div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
        <div class="header-divider-small">{{activity.year}}</div>
        <div class="header-divider">{{activity.date_divider}}</div>
      </div>

        <div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
            <span class="header">{{activity.name}}</span>
              <br />
              <span class="text">{{activity.time}} - {{activity.place}}</span>
              <a class="button button-icon icon {{activity.icon}} right not-selected"></a>
        </div>


    </ion-list>
    <div id="start"></div>
  </ion-content>
</ion-view>

<强>控制器

$timeout(function() {
   $ionicScrollDelegate.$getByHandle('kalendar').anchorScroll('start');
}, 10);

Answer 3

Specify the dalegate-handler in ion-content

<ion-view title="Kalender">
    <ion-content delegate-handle="start">
        <ion-list ng-repeat="activity in calendar">
        <div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
            <div class="header-divider-small">{{activity.year}}</div>
            <div class="header-divider">{{activity.date_divider}}</div>
        </div>

        <div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
             <span class="header">{{activity.name}}</span>
             <br />
             <span class="text">{{activity.time}} - {{activity.place}}</span>
             <a class="button button-icon icon {{activity.icon}} right not-selected"></a>
        </div>
        </ion-list>
    </ion-content>
 </ion-view>

滚动顶部可以通过忘记滚动位置来实现，这可以通过使用

来实现

$scope.$on("$destroy", function() {
    var delegate = $ionicScrollDelegate.$getByHandle('start');
    delegate. forgetScrollPosition();
});

使用

$ionicScrollDelegate.$getByHandle('start').scrollTop(); //To scroll to Top.

我注意到delegate-handle与overflow-scroll一起使用时无效。

Answer 4

我设法这样做了：

$scope.scrollHandle = some-handle-value-that-you-want-to-use;

$scope.$on('$ionicView.loaded', function () {

    $timeout(function () {
        scrollView = $ionicScrollDelegate._instances.filter(function (s) {
            if (!s.$$delegateHandle) return false;
            return $parse(s.$$delegateHandle.slice(2, -2))
                (angular.element(s.element).scope()) == $scope.scrollHandle;
        })[0];

    }).then(function () {
        scrollView.scrollTo(0, 0, false);
    });
});

在模板中：

delegate-handle="{{scrollHandle}}"

编辑：

此功能不再有效，请查看此解决方案以获取新解决方案：https://stackoverflow.com/a/32123613/1630623

使用$ getByHandle（），离子卷轴不会在加载时触发

4 个答案: