Ionic 列表（实用）

ゝ一世哀愁。 2022-05-10 11:06 300阅读 0赞

原文出处：[https://blog.csdn.net/qq\_20448859/article/details/52254822][https_blog.csdn.net_qq_20448859_article_details_52254822]

## 1.简介 ##

列表是常用的组织信息的方式，在ionic中，使用ion-list指令声明列表元素，使用ion-item指令声明成员元素。  
　　ion-list和ion-item可选的样式如下。  
![这里写图片描述][20160819224813105]  
![这里写图片描述][20160819224823746]

## 2.ion-list样式 ##

### 1）边框 ###

我们可以为ion-list添加list-boderless类来实现无边框的列表。

<ion-list>
        <ion-item class="item-divider">normal</ion-item>
        <ion-item>First</ion-item>
        <ion-item>Second</ion-item>
        <ion-item>Third</ion-item>
    </ion-list>
    <ion-list class="list-borderless">
        <ion-item class="item-divider">list-borderless</ion-item>
        <ion-item>First</ion-item>
        <ion-item>Second</ion-item>
        <ion-item>Third</ion-item>
    </ion-list>

![这里写图片描述][20160819234437320]

### 2）属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>list-inset<br> card</td> 
   <td>产生内嵌效果<br> 产生内嵌效果，并且有阴影效果。</td> 
  </tr> 
  <tr> 
   <td>show-delete</td> 
   <td>作用域的布尔变量</td> 
   <td>是否显示成员的ion-delete-button，固定显示在item左侧。</td> 
  </tr> 
  <tr> 
   <td>show-reorder</td> 
   <td>作用域的布尔变量</td> 
   <td>是否显示成员内的reorder按钮，固定显示在item右侧。</td> 
  </tr> 
  <tr> 
   <td>can-swipe</td> 
   <td>作用域的布尔变量</td> 
   <td>是否支持滑动，滑动会显示item的option按钮。</td> 
  </tr> 
 </tbody> 
</table>

在显示删除或重排序按钮的时候，是不能滑动的，而且现在点击删除和排序按钮肯定是没有反应的，接下来会在脚本接口部分演示。

<body ng-app="myApp" ng-controller="myController">
        <ion-list show-delete="flag.showDelete" show-reorder="flag.showReorder">
            <ion-item ng-repeat="item in items">
                <ion-delete-button class="ion-minus-circled"></ion-delete-button>
                <ion-reorder-button class="ion-navicon"></ion-reorder-button>
                {
       { item }}
            </ion-item>
        </ion-list>
        <script>
            var app = angular.module("myApp",["ionic"]);
            app.controller("myController",function($scope) {
                $scope.items = ["first","second","third"];
                $scope.flag = {
                    showDelete:true,
                    showReorder:true,
                };
            });
        </script>
    </body>

![这里写图片描述][20160822223715170]

## 3.ion-item样式 ##

### 1）边框 ###

可以为成员指定item-borderless类使得该成员无边框。

<ion-list>
        <ion-item class="item-divider">item-borderless</ion-item>
        <ion-item>First</ion-item>
        <ion-item class="item-borderless">Second</ion-item>
        <ion-item>Third</ion-item>
    </ion-list>

![这里写图片描述][20160821201425110]

### 2）配色 ###

可以为每个item指定不同的item-color类来指定不同的颜色。

<ion-list>
        <ion-item class="item-divider">item-color</ion-item>
        <ion-item class="item-light">item-light</ion-item>
        <ion-item class="item-stable">item-stable</ion-item>
        <ion-item class="item-positive">item-positive</ion-item>
        <ion-item class="item-calm">item-calm</ion-item>
        <ion-item class="item-balanced">item-balanced</ion-item>
        <ion-item class="item-energized">item-energized</ion-item>
        <ion-item class="item-assertive">item-assertive</ion-item>
        <ion-item class="item-royal">item-royal</ion-item>
        <ion-item class="item-dark">item-dark</ion-item>
    </ion-list>

![这里写图片描述][20160821201130952]

### 3）分组 ###

这个在前面已经多次使用了，我们可以为成员指定ion-divider类来实现一个列表分隔符。

### 4）嵌入按钮 ###

可以指定item-button-left和item-button-right来控制按钮在成员内的位置。

<ion-list>
        <ion-item class="item-button-left">
            <div class="button button-positive">左侧按钮</div>
            <p>First</p>
        </ion-item>
        <ion-item class="item-button-right">
            <div class="button button-balanced">右侧按钮</div>
            <p>Second</p>
        </ion-item>
    </ion-list>

![这里写图片描述][20160822231847526]

### 5）嵌入图标 ###

可以指定item-icon-left和item-icon-right来控制图标的位置。

<ion-list>
        <ion-item class="item-icon-left">
            <div class="icon ion-chatbox"></div>
            First
        </ion-item>
        <ion-item class="item-icon-right">
            <div class="icon ion-chatbox-working"></div>
            Second
        </ion-item>
    </ion-list>

![这里写图片描述][20160823000359164]

### 6）头像 ###

同样可以指定item-avator-left和item-avator-right来控制头像的位置，在Ionic中，头像是一个最大半径为40px的圆形图片，我们需要在item中的第一个img标签来指定使用的图片。

<ion-list>
        <ion-item class="item-avatar-left">
            <img src="tom.jpg"/>
            I am Tom
        </ion-item>
        <ion-item class="item-avatar-right">
            <img src="jerry.jpg"/>
            I am Jerry
        </ion-item>
    </ion-list>

![这里写图片描述][20160825012333831]

### 7）缩略图 ###

缩略图和头像的区别在于缩略图是一张最大边长为80px的正方形图片，同样用item-thumbnail-left和item-thumbnail-right来指定缩略图的位置，用item的第一个img标签来指定图片。  
![这里写图片描述][20160825013146487]

[https_blog.csdn.net_qq_20448859_article_details_52254822]: https://blog.csdn.net/qq_20448859/article/details/52254822
[20160819224813105]: /images/20220510/6d2a07d6352d43aca0cd2547f4e3d5e4.png
[20160819224823746]: /images/20220510/9cfed367c02a48218de816535ea5ea17.png
[20160819234437320]: /images/20220510/d997263dd5f94df78ef6b01fb4a10600.png
[20160822223715170]: /images/20220510/b5cfdb43512c456b8d3c2e97cfeff8de.png
[20160821201425110]: /images/20220510/dc2591805ddd4997ac5ded709065f7ae.png
[20160821201130952]: /images/20220510/fac1bc52cbdc433690bd78927ba2f0c9.png
[20160822231847526]: /images/20220510/a86d2d34e8e4448484448035b19b1487.png
[20160823000359164]: /images/20220510/0c2588790be349ffbf06c255fbd6be31.png
[20160825012333831]: /images/20220510/7cc7bd4db3824ad7b21b7b551aecf75a.png
[20160825013146487]: /images/20220510/73f3f008bbb44a37be11110691d214d1.png