icon

ionic 列表操作 | 菜鸟教程

https://www.runoob.com/ionic/ionic-ion-list.html

更新时间:2019/5/20 9:51:22

关键字:ionic 列表操作
描述:ionic 列表操作 列表是一个应用广泛在几乎所有移动app中的界面元素。ionlist 和 ionitem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等。 用法 hello, {{item}}! 高级用法: 缩略图,删除按钮,重新排序,滑动 {{item.title}} {{item.description}} ..
内容:菜鸟教程 -- 学的不仅是技术,更是梦想!首页htmlcssjavascriptjquerybootstrapsqlmysqlphppython2python3cc++c#java本地书签我的圈子 登录首页htmlcssjs本地书签search ionic 教程 ionic 教程 ionic 安装 ionic 创建 app ionic css ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic toggle ionic checkbox ionic 单选框 ionic range ionic select ionic tab(选项卡) ionic 网格(grid) ionic 颜色 ionic icon(图标) ionic javascript ionic 上拉菜单 ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模态窗口 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作 ionic 头部和底部 ionic 加载动作 ionic 列表操作列表是一个应用广泛在几乎所有移动app中的界面元素。ionlist 和 ionitem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等。用法ion-listion-item ng-repeat="item in items"hello, {{item}}!/ion-item/ion-list高级用法: 缩略图,删除按钮,重新排序,滑动ion-list ng-controller="myctrl"show-delete="shouldshowdelete"show-reorder="shouldshowreorder"can-swipe="listcanswipe"ion-item ng-repeat="item in items"class="item-thumbnail-left"img ng-src="{{item.img}}"h2{{item.title}}/h2p{{item.description}}/pion-option-button class="button-positive"ng-click="share(item)"分享/ion-option-buttonion-option-button class="button-info"ng-click="edit(item)"编辑/ion-option-buttonion-delete-button class="ion-minus-circled"ng-click="items.splice($index, 1)"/ion-delete-buttonion-reorder-button class="ion-navicon"on-reorder="reorderitem(item, $fromindex, $toindex)"/ion-reorder-button/ion-item/ion-listapi属性类型详情delegate-handle(可选)字符串该句柄定义带有$ioniclistdelegate的列表。show-delete(可选)布尔值列表项的删除按钮当前是显示还是隐藏。show-reorder(可选)布尔值列表项的排序按钮当前是显示还是隐藏。can-swipe(可选)布尔值列表项是否被允许滑动显示选项按钮。默认:true。实例html 代码:html ng-app="ionicapp"headmeta charset="utf-8"meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"titleionic list directive/titlelink href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"/script/headbody ng-controller="myctrl"ion-header-bar class="bar-positive"div class="buttons"button class="button button-icon icon ion-ios-minus-outline"ng-click="data.showdelete = !data.showdelete; data.showreorder = false"/button/divh1 class="title"ionic delete/option buttons/h1div class="buttons"button class="button" ng-click="data.showdelete = false; data.showreorder = !data.showreorder"reorder/button/div/ion-header-barion-content!-- the list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --ion-list show-delete="data.showdelete" show-reorder="data.showreorder"ion-item ng-repeat="item in items" item="item"href="#/item/{{item.id}}" class="item-remove-animate"item {{ item.id }}ion-delete-button class="ion-minus-circled" ng-click="onitemdelete(item)"/ion-delete-buttonion-option-button class="button-assertive"ng-click="edit(item)"edit/ion-option-buttonion-option-button class="button-calm"ng-click="share(item)"share/ion-option-buttonion-reorder-button class="ion-navicon" on-reorder="moveitem(item, $fromindex, $toindex)"/ion-reorder-button/ion-item/ion-list/ion-content/body/htmlcss 代码body {cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;}javascript 代码angular.module('ionicapp', ['ionic']).controller('myctrl', function($scope) {$scope.data = {showdelete: false};$scope.edit = function(item) {alert('edit item: ' + item.id);};$scope.share = function(item) {alert('share item: ' + item.id);};$scope.moveitem = function(item, fromindex, toindex) {$scope.items.splice(fromindex, 1);$scope.items.splice(toindex, 0, item);};$scope.onitemdelete = function(item) {$scope.items.splice($scope.items.indexof(item), 1);};$scope.items = [{ id: 0 },{ id: 1 },{ id: 2 },{ id: 3 },{ id: 4 },{ id: 5 },{ id: 6 },{ id: 7 },{ id: 8 },{ id: 9 },{ id: 10 },{ id: 11 },{ id: 12 },{ id: 13 },{ id: 14 },{ id: 15 },{ id: 16 },{ id: 17 },{ id: 18 },{ id: 19 },{ id: 20 },{ id: 21 },{ id: 22 },{ id: 23 },{ id: 24 },{ id: 25 },{ id: 26 },{ id: 27 },{ id: 28 },{ id: 29 },{ id: 30 },{ id: 31 },{ id: 32 },{ id: 33 },{ id: 34 },{ id: 35 },{ id: 36 },{ id: 37 },{ id: 38 },{ id: 39 },{ id: 40 },{ id: 41 },{ id: 42 },{ id: 43 },{ id: 44 },{ id: 45 },{ id: 46 },{ id: 47 },{ id: 48 },{ id: 49 },{ id: 50 }];});尝试一下 ? ionic 头部和底部 ionic 加载动作 点我分享笔记笔记需要是本篇文章的内容扩展!文章投稿,可点击这里注册邀请码获取方式分享笔记前必须登录!注册邀请码获取方式取消分享笔记昵称昵称 (必填)邮箱邮箱 (必填)引用地址引用地址关注微信(群号:365967760)分类导航html / csshtml 教程html5 教程css 教程css3 教程bootstrap3 教程bootstrap4 教程font awesome 教程foundation 教程 javascriptjavascript 教程html dom 教程jquery 教程angularjs 教程angularjs2 教程vue.js 教程react 教程typescript 教程jquery ui 教程jquery easyui 教程node.js 教程ajax 教程json 教程highcharts 教程google 地图 教程 服务端php 教程python 教程python3 教程django 教程linux 教程docker 教程ruby 教程java 教程c 教程c++ 教程perl 教程servlet 教程jsp 教程lua 教程scala 教程go 教程设计模式正则表达式maven 教程numpy 教程asp 教程appml 教程vbscript 教程 数据库sql 教程mysql 教程sqlite 教程mongodb 教程redis 教程memcached 教程 移动端android 教程swift 教程jquery mobile 教程ionic 教程kotlin 教程 xml 教程xml 教程dtd 教程xml dom 教程xslt 教程xpath 教程xquery 教程xlink 教程xpointer 教程xml schema 教程xsl-fo 教程svg 教程 asp.netasp.net 教程c# 教程web pages 教程razor 教程mvc 教程web forms 教程 web serviceweb service 教程wsdl 教程soap 教程rss 教程rdf 教程 开发工具eclipse 教程git 教程svn 教程markdown 教程 网站建设http 教程网站建设指南浏览器信息网站主机教程tcp/ip 教程w3c 教程网站品质 advertisement反馈/建议在线实例·html 实例·css 实例·javascript 实例·ajax 实例·jquery 实例·xml 实例·java 实例字符集&工具· html 字符集设置· html ascii 字符集· html iso-8859-1· html 实体符号· html 拾色器· json 格式化工具最新更新·php 会话(sessio...·shell 读取文件...·python 归并排序·python 冒泡排序·python 选择排序·python 快速排序·python 插入排序站点信息·意见反馈·支持我们·合作联系微信(注明来意):centos5·免责声明·打赏一下·关于我们·文章归档关注微信copyright ? 2013-2019 菜鸟教程 runoob.com all rights reserved. 备案号:闽icp备15012807号-1微信关注感谢您的支持,我会继续努力的!扫码打赏,你说多少就多少打开支付宝扫一扫,即可进行扫码打赏哦点我查看本站打赏源码!用户登录注册新用户用户名密码记住登录状态忘记密码?邀请码用户名邮箱密码重复输入密码我已阅读并同意 用户协议如何获取邀请码?关闭