我正在使用 ionic
开发移动应用程序。在这里,我试图实现这样的删除功能:
正如我们所见,每个列表项的左侧都有一个图标,当单击该图标时,列表会过渡到左侧,并且删除按钮会显示在屏幕上。
我想实现相同的功能..但无法编写正确的 CSS。请指导我如何完成这项工作。 这是我的 plunkr 的链接
最佳答案
您可以使用 ionic 列表指令。
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-info"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
Controller :
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});
关于html - CSS : Transition list to left when clicked on delete icon,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37236968/