Ionic基础——列表ion-list

最新推荐文章于 2023-11-10 10:29:59 发布

寂静代码

最新推荐文章于 2023-11-10 10:29:59 发布

阅读量3.9k

点赞数

分类专栏： ionic

本文链接：https://blog.csdn.net/mr_jianrong/article/details/77505762

版权

本文详细介绍了Ionic框架中的ion-list组件及其属性，包括列表类型、删除和重排按钮的使用，以及ion-option-button等成员按钮的配置和交互。通过示例代码展示了如何创建可滑动选项、删除和重排功能的列表项。

摘要由CSDN通过智能技术生成

一.列表 : ion-list

列表是常用的信息组织方式。在ionic中，使用ion-list指令声明列表元素，使用ion-item指令声明成员元素：

[html]view plaincopy 
   
 <ion-list>   
    <ion-item>...</ion-item>   
    <ion-item>...</ion-item>   
    ...   
 </ion-list>  

ion-list指令提供以下属性用来定制列表的外观：

type - 列表种类。type属性是可选的，可用来设置列表的种类： list-inset | card。这两种列表都产生内嵌的效果，区别在于card列表有边框的阴影效果。
show-delete - 是否显示成员内的delete按钮。show-delete属性是可选的。如果在成员内有delete按钮（ion-delete-button），使用这个属性来通知列表是否显示元素删除按钮。允许的值为：true | false.
show-reorder - 是否显示成员内的reorder按钮。show-reorder属性是可选的。如果在成员内有reorder按钮（ion-reorder-button），使用这个属性来通知列表是否显示元素重排序按钮。允许的值为：true | false.
can-swipe - 是否支持滑动方式显示成员option按钮。can-swipe属性是可选的。如果在成员内有option按钮（ion-option-button），使用这个属性来允许或禁止通过向左滑动成员来打开option按钮。允许的值为：true | false ，默认为true。

[html]view plaincopy 
    
 <!DOCTYPE html>  
 <html ng-app="myApp">  
 <head>  
     <meta charset="UTF-8">  
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
     <script src="../lib/js/ionic.bundle.min.js"></script>  
     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
   
 </head>  
 <body  ng-controller="myCtrl">  
     <ion-header-bar class="bar-positive">  
         <h1 class="title">ion-list</h1>  
     </ion-header-bar>  
     <ion-content>  
         <ion-list can-swipe="true">  
             <ion-item ng-repeat="item in items">  
             {
     {item}}  
                 <ion-option-button class="button-calm icon ion-edit"></ion-option-button>  
                 <ion-option-button class="button-energized icon ion-share"></ion-option-button>  
             </ion-item>  
         