向左/向右滑动用户媒体卡以显示下一个

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

只需要更好地处理边界。