在网格上的可切换布局中同步项目，并在离子框架中列出

Question

我在离子中做了一个可转换的布局（网格或列表）。

http://codepen.io/WilsonFpz/pen/jPYqBq

   <a class="" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'">List</a>
   <a class="" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'">Gird</a>

正如您在codepen中看到的，用户可以选择布局来显示项目（在这种情况下约为100）。

但滚动项目时存在同步问题，导致用户体验不佳。

正如您在附件图片中看到的，当用户滚动到列表布局中的第56个项目时，

该项目在网格布局中仍然是第42位。

这是由网格和列表的高度差引起的。

有人可以给我一些关于如何在用户切换时粗略同步的技巧吗？

感谢。

Answer 1

您可以使用$ ionicScrollDelegate服务使用rememberScrollPosition（id）滚动到具有匹配ID的元素。

所以当你切换视图时你应该可以使用：scrollToRememberedPosition（[shouldAnimate]）

示例：

<ion-toggle ng-model="shouldShowScrollView"></ion-toggle>
<ion-scroll delegate-handle="myScroll" ng-if="shouldShowScrollView">
  <div ng-controller="ScrollCtrl">
    <ion-list>
      <ion-item ng-repeat="i in items">{{i}}</ion-item>
    </ion-list>
  </div>
</ion-scroll>

function ScrollCtrl($scope, $ionicScrollDelegate) {
  var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

  delegate.rememberScrollPosition('my-scroll-id');
  delegate.scrollToRememberedPosition();
  $scope.items = [];
  for (var i=0; i<100; i++) {
    $scope.items.push(i);
  }
}

您可以在此处详细了解：http://ionicframework.jp/docs/api/service/ $ ionicScrollDelegate /