首页 > 代码库 > 用ionic做的列表向左滑动,出现删除等功能按钮

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

废话不多说,直接上代码

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 这两个标签,然后在列表下面 写上自己需要的按钮,即可实现

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