在网格上的可切换布局中同步项目并在离子框架中列出 [英] Sync item in switchable layouts on grid and list in ionic framework

问题描述

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

$ ionicScrollDelegate /

I had made a swtichable layout (grid or list) in 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>

As you can see in the codepen, user can choose the layout to show items (~100 in the case).

But there are some problem about sync when scrolling item and it caused bad UX.

As you can see in the attachment image, when the user scroll to about the 56th item in the list layout,

the item is still about 42th in the grid layout.

This is caused by the height differences for grid and list.

Could someone give me some trick about how to sync roughly when user switch?

Thanks.

解决方案

You can use the $ionicScrollDelegate service to scroll to the element with a matching id using rememberScrollPosition(id).

so when you switch views you should be able to use: scrollToRememberedPosition([shouldAnimate])

Example:

<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);
  }
}

You can read more about it here: http://ionicframework.jp/docs/api/service/$ionicScrollDelegate/

这篇关于在网格上的可切换布局中同步项目并在离子框架中列出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！