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

【问题标题】：Swipe user media cards left/right to reveal next one向左/向右滑动用户媒体卡以显示下一张
【发布时间】：2016-04-28 07:19:43
【问题描述】：

我正在尝试实现一个小部件，其中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>

这里是笨蛋http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

【问题讨论】：

所以你想要一排？

标签： javascript html css angularjs

【解决方案1】：

这是一个具有工作实现的 plunkr。

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

我在 HTML 中添加了 ngTouch 和 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;
    };
  };
};

只需要更好地处理边界。

【讨论】：