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 这两个标签,然后在列表下面 写上自己需要的按钮,即可实现
  • 相关阅读:
    【zookeeper】
    关于redis-windows环境下的一些配置:
    mybatis-注解开发
    jQuery的Validate插件
    Thymeleaf 学习笔记-实例demo(中文教程)
    thymeleaf 学习笔记-基础篇(中文教程)
    AGC 043C
    JOISC 2020 部分题解
    Loj #2687
    CF 1270I
  • 原文地址:https://www.cnblogs.com/maochunyan/p/6892559.html
Copyright © 2011-2022 走看看