ionic 实现QQ左滑置顶和删除

最新推荐文章于 2019-10-18 22:36:48 发布

asf484849874

最新推荐文章于 2019-10-18 22:36:48 发布

阅读量169

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoLiJin/p/9861372.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="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
  <script>
    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 }
        ];

      });
  </script>
  <style>
    body {
      cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
    }
  </style>
</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>

转载于:https://www.cnblogs.com/xiaoLiJin/p/9861372.html

asf484849874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic 实现QQ左滑置顶和删除

<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"> ...
复制链接

扫一扫

ionic 实现QQ左滑置顶和删除

“相关推荐”对你有帮助么？