阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Ionic 列表操作

    ionic 列表操作

    列表是一个应用广泛在几乎所有移动 app 中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等。

    用法

    <ion-list>
      <ion-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}}</h2>
        <p>{{item.description}}</p>
        <ion-option-button class="button-positive"
                           ng-click="share(item)">
          分享
        </ion-option-button>
        <ion-option-button class="button-info"
                           ng-click="edit(item)">
          编辑
        </ion-option-button>
        <ion-delete-button class="ion-minus-circled"
                           ng-click="items.splice($index, 1)">
        </ion-delete-button>
        <ion-reorder-button class="ion-navicon"
                            on-reorder="reorderItem(item, $fromIndex, $toIndex)">
        </ion-reorder-button>
    
      </ion-item>
    </ion-list>
    

    API

    <tr>
      <td>
        delegate-handle
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    字符串

    属性 类型 详情

    该句柄定义带有$ionicListDelegate的列表。

      </td>
    </tr>
    
    <tr>
      <td>
        show-delete
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    布尔值

    列表项的删除按钮当前是显示还是隐藏。

      </td>
    </tr>
    
    <tr>
      <td>
        show-reorder
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    布尔值

    列表项的排序按钮当前是显示还是隐藏。

      </td>
    </tr>
    
    <tr>
      <td>
        can-swipe
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    布尔值

    列表项是否被允许滑动显示选项按钮。默认:true。

      </td>
    </tr>
    

    实例

    HTML 代码:

    <html ng-app="ionicApp">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Ionic List Directive</title>
    
        <link href="http://www.axihe.com/static/ionic/css/ionic.min.css" rel="stylesheet">
        <script src="http://www.axihe.com/static/ionic/js/ionic.bundle.min.js"></script>
      </head>
    
      <body 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>
          </div>
          <h1 class="title">Ionic Delete/Option Buttons</h1>
          <div class="buttons">
            <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
                Reorder
            </button>
          </div>
        </ion-header-bar>
    
        <ion-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-button>
              <ion-option-button class="button-assertive"
                                 ng-click="edit(item)">
                Edit
              </ion-option-button>
              <ion-option-button class="button-calm"
                                 ng-click="share(item)">
                Share
              </ion-option-button>
              <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
            </ion-item>
    
          </ion-list>
    
        </ion-content>
    
      </body>
    </html>
    

    CSS 代码

    body {
      cursor: url('http://www.axihe.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 }
      ];
    
    });
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录