zoukankan      html  css  js  c++  java
  • 用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 这两个标签,然后在列表下面 写上自己需要的按钮,即可实现
  • 相关阅读:
    屠蛟之路_重伤的屠蛟俊_ThirdDay
    屠蛟之路_重登数据库大山_SecondDay
    屠蛟之路_你的名字_FirstDay
    Beta版本冲刺计划及安排
    软件工程作业1203
    导师互选系统 Alpha版冲刺总结
    屠龙之路_项目测试
    【Alpha】十天屠龙记
    屠龙之路_冲刺总结随笔
    My97日历控件常用功能记录
  • 原文地址:https://www.cnblogs.com/maochunyan/p/6892559.html
Copyright © 2011-2022 走看看