在离子框架网格式和列表切换布局同步项目(Sync item in switchable layout

我做了一个swtichable布局（网格或列表）离子。

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）的布局，以显示项目。

但也有滚动条的时候即将同步的一些问题，它造成的不良UX。

正如你可以在附件图片中看到，当用户滚动至列表中的布局中第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 /

文章来源: Sync item in switchable layouts on grid and list in ionic framework