zoukankan      html  css  js  c++  java
  • Ionic Js九:列表操作

    列表是一个应用广泛在几乎所有移动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>

    实例
    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.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
        <script src="http://www.runoob.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.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 }
      ];
      
    });

  • 相关阅读:
    K8S实战(十七)| 通过 StorageClass 实现动态卷供应
    K8S实战(十六)| 持久化存储卷
    K8S实战(十五)| 存储卷概念
    K8S实战(十四)| ConfigMap 对象
    K8S实战(十三)| Secret 对象
    K8S实战(十二)| 为 Ingress 以及后端 Nginx 增加证书
    批量删除git 本地分支、远程分支、tag
    React 页面间传值的个人总结
    搭建一个属于自己的webpack config(-)
    HTTP 2 新特性
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-jiu-lie-biao-cao-zuo.html
Copyright © 2011-2022 走看看