Question

Ionic Swipe Left不适用于item-icon-right

我遇到了一些令人困惑的行为。使用离子列表和离子项，我设置属性以启用滑动。

＆＃13;

<ion-list can-swipe="true">
  <ion-item ng-repeat="element in ctrl.data" class="item-remove-animate item-icon-right">
    <span>{{ element }}</span>
    <span class="item-note">Date</span>
    <i class="icon ion-chatbubble-working"></i>
    <ion-option-button class="button-assertive icon ion-trash-a" ng-click="ctrl.delete($index) ">
    </ion-option-button>
  </ion-item>
</ion-list>

＆＃13;

但是，我遇到了两个问题

删除动画似乎无法正常工作
如果设置＆＃34; item-icon-right＆＃34;在离子列表上，然后滑动完全混乱。如果我添加一个＆＃34; i＆＃34;标记与类，滑动工作。

有谁知道为什么会这样？我是CSS和ion的新手，所以我在调试时知道要查找什么有点困难。

如果您能告诉我您的思考过程或指向调试这些意外行为的相关文章，我真的很感激

Answer 1

对于删除动画，由于性能下降，似乎collection-repeat没有添加“ng-leave”类。 (ref)

对于向左滑动的错误，我不得不从离子选项类中删除“icon”。

Answer 2

这里的示例希望这对您有所帮助

<ion-list class"animate-ripple" show-delete="false" can-swipe="true"  swipe-direction="both">
    <ion-item  ng-show="orders_list.length==0">
        <h2>No orders, Please go to Menu and Select Create a Order</h2>
    </ion-item> 
    <ion-item item="order" 
          ng-repeat="order in orders_list | custom:filterOrder" 
          class="item-text-wrap" >
        <a class="item item-icon-right" style=" border:none; text-align:left" 
          ng-click="showOrdersDetail(order.order_id)">
            <i class="icon ion-chevron-right"></i>
            <h2>Order No. {{order.order_id}}</h2>
            <h5>TOTAL:{{order.total_pagar}}</h5>
            <h5>ITEMS:{{order.total_items}}</h5>
        </a>
        <div ng-if="filterOrder.tipo_estado === 'ACT'">
           <ion-option-button class="button-assertive" ng-click="del_order(order,{{$index}});">
                    Del
           </ion-option-button>
           <ion-option-button class="button-balanced" ng-click="pay_order(order);">
                Pay
           </ion-option-button>
        </div>
        <div ng-if="filterOrder.tipo_estado === 'PAG'">
            <ion-option-button class="button-balanced" ng-click="showLinceseList(order.order_id);">
                Apply a<br> License
            </ion-option-button>
        </div>
    </ion-item>
</ion-list>

Ionic Swipe Left不适用于item-icon-right

2 个答案: