向左/向右滑动用户媒体卡以显示下一个
问题描述:
我正在尝试实现一个小部件,其中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
答
这里是一个工作实施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;
};
};
};
只需要更好地处理边界。
所以你想有一个行? – Aziz
是的,只有一行 – whippits