向左/向右滑動用戶媒體卡以顯示下一個

Question

我正在嘗試實現一個小部件，其中ng-repeats水平用戶媒體對象，我應該可以左右滑動以顯示下一張媒體卡。小部件應該是這個樣子

正如你所看到的圖像

下一張牌的頭像是可見的一半，暗示有更多的卡刷卡。

這是所有目前我有..我堅持在這裏

div class="media people-card-media col-xs-12" ng-repeat="item in cats"> 
     <div class="media-left "> 
      <div class="person-photo presence" > 
       <img class="media-object list__photo img-circle" ng-src="{{item.photo}}" /> 

      </div> 
     </div> 
     <div class="media-body list__body"> 
      <div class="people_name_title"> 
       <h4 class="media-heading title">{{item.name}}</h4> 

      </div> 
     </div> 
     <div class="media-right media-middle contacts-chat-call flex-it-align-top"> 
      <a style="margin-right: 10px;"> 
       call 
      </a> 

     </div> 
    </div> 

繼承人的plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

Answer 1

這裏是一個工作實施plunkr。

http://plnkr.co/edit/wmIyCFM57hniZQ82Z8Ba?p=preview

我加入ngTouch和在HTML中的ng-class和觸摸事件處理程序。

<div class="media people-card-media col-xs-12" 
     ng-class="item.displayClass" 
     ng-repeat="item in heroes" 
     ng-click="gonext()" 
     ng-swipe-left="gonext()" 
     ng-swipe-right="goprev()"> 

而在MainController，它通過給它分配一個current類翻閱活動項目，和next-up和previous類的鄰居。

$scope.gonext = function() { 
    for (var i=0, len=$scope.heroes.length; i<len; i++) { 
    if ($scope.heroes[i].displayClass == 'current') { 
     $scope.heroes[i].displayClass = 'previous'; 
     if (i<len-1) $scope.heroes[i+1].displayClass = 'current'; 
     if (i<len-2) $scope.heroes[i+2].displayClass = 'next-up'; 
     i=len; 
    }; 
    }; 
}; 

只需要更好地處理邊界。