用ionic做的列表向左滑动，出现删除等功能按钮

Posted 2020-09-19 温温婉婉

废话不多说，直接上代码

html代码：

<!--列表-->
<ul class="lists" ng-repeat="list in lists">
  <ion-list>
    <ion-item>
      
      <!--这是列表-->
      <li class="ub ub-ac" ng-click="goApplyDetail(list.keyid)" >
        <div class="listLeft">{{list.registrantDname}}</div>
        <div class="ub ub-ver ub-f1 padding-left">
          <div class="ub ub-ac ub-pj">
            <div class="proposer">积分所属:{{list.scoreManName}}</div>
            <div class="time">{{list.useDate}}</div>
          </div>
          <div class="ApplicationDetails">{{list.scoreSname}}</div>
          <div class="status">{{list.explainStatus}}</div>
        </div>
      </li>

        <!--这是向左滑动时的按钮-->

        <!--不通过-->
        <ion-option-button ng-click="checkBtn(list,$index,‘unpass‘)" class="button-assertive">
          <label>不通过</label>
        </ion-option-button>

        <!--通过-->
        <ion-option-button  ng-click="checkBtn(list,$index,‘pass‘)" class="button-balanced" >
          <label>通过</label>
        </ion-option-button>

        <!--撤销-->
        <ion-option-button  ng-click="cancelApprove(list.keyid,$index)" class="button-energized" >
          <label>撤销</label>
        </ion-option-button>
     
    </ion-item>
  </ion-list>

</ul>

html代码中，我在ul标签里嵌套了 ion-list 和 ion-item 这两个标签，然后在列表下面 写上自己需要的按钮，即可实现