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 }
      ];
      
    });

  • 相关阅读:
    康复计划
    Leetcode 08.02 迷路的机器人 缓存加回溯
    Leetcode 38 外观数列
    Leetcode 801 使序列递增的最小交换次数
    Leetcode 1143 最长公共子序列
    Leetcode 11 盛水最多的容器 贪心算法
    Leetcode 1186 删除一次得到子数组最大和
    Leetcode 300 最长上升子序列
    Leetcode95 不同的二叉搜索树II 精致的分治
    Leetcode 1367 二叉树中的列表 DFS
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-jiu-lie-biao-cao-zuo.html
Copyright © 2011-2022 走看看