用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 这两个标签,然后在列表下面 写上自己需要的按钮,即可实现
时间: 2024-12-17 20:24:38

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

小程序 开发之向左滑动实现删除功能

为了让用户的体验效果有一个很大的提升,在删除 单行信息 的 时候,我们逐渐从点击删除到向左 滑动实现删除.那么小程序的左滑删除是怎么实现的呢? 效果如图: 第一步:先进行页面的布局: <!-- 自定义单选/多选/全选实现删除功能 --> <view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{i

js移动端向左滑动出现删除按钮

最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件.下面是我后来实现后的代码,其实就是用了原生js的touch事件

JS~一个列表中包含上移下移删除等功能

最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&

QQ好友列表向左滑动出现置顶、删除--第三方开源--SwipeMenuListView

SwipeMenuListView是在github上的第三方开源项目,该项目在github上的链接地址是:https://github.com/baoyongzhang/SwipeMenuListView . 下载后直接将项目包复制粘贴到需要的项目当中: 测试代码: item.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="htt

IOS cell左滑出现多个功能按钮(IOS8以后支持)

#import "ViewController.h" #import "Swift_OC-Swift.h" @interface ViewController ()<UITableViewDelegate,UITableViewDataSource> @property (weak, nonatomic) IBOutlet UITableView *tableView; @property(nonatomic,strong)NSMutableArray

[Swift通天遁地]二、表格表单-(7)电子邮件Mail:实现单元格左右滑动调出功能按钮

本文将演示对单元格进行扩展,当手指在单元格左右滑动时,弹出不同的功能菜单. Github项目:[MGSwipeTableCell] 下载该项目的源代码.文件夹[demo]->文件夹[MailAppDemoSwift]->文件夹[MailAppDemoSwift] ->双击文件[MailAppDemoSwift.xcodeproj]打开示例工程. 选择该项目中的几个文件,拖动到自己的开发项目中.按住[Shift],选择 [MGSwipeButton.h] [MGSwipeButton.m]

Android仿qq下拉刷新及向左滑动列表----PullToRefresh, SwipeMenuListView开源项目整合

Github链接:https://github.com/licaomeng/Android-PullToRefresh-SwipeMenuListView-Sample PullToRefresh是一个非常完美的下拉刷新的开源项目,SwipeMenuListView是一个向左滑动ListView中item实现可以删除功能的开源项目.笔者在此将两套开源项目整合形成一套,类似于手机qq那样同时支持下拉刷新和向左滑动的列表.效果如下: 版权声明:本文为博主原创文章,未经博主允许不得转载.

高仿 美团 向左滑动删除条目

1.效果图             2.功能实现 2.1 布局结构 <?xml version="1.0" encoding="UTF-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=&quo

[UI列表]LoopScrollRect无限滑动不卡顿

应用场景 对于背包界面,排行榜列表,聊天消息,等有大量的UI列表的界面,常规做法是为每一条数据生成一个格子,在数据量越大的情况下,会生成越来越多的Gameobject,引起卡顿. 这篇文章讲述的就是解决UI列表卡顿的方法,在列表中只生成指定数量的Gameobject,滑动时进行数据更新,保证性能. LoopScrollRect(无限滑动不卡顿) 插件地址:https://github.com/qiankanglai/LoopScrollRect 中文文档:http://qiankanglai.m