在 ionic 框架中的网格和列表的可切换布局中同步项目答案

【问题标题】：Sync item in switchable layouts on grid and list in ionic framework在 ionic 框架中的网格和列表的可切换布局中同步项目
【发布时间】：2015-09-15 12:35:53
【问题描述】：

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

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 位左右。

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

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

谢谢。

【问题讨论】：

标签： angularjs ionic-framework

【解决方案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/

【讨论】：