Question

我想制作一张＆＃34;卡＆＃34;可以在Ionic中向左和向右滑动。我找到了一个教程，使列表项可以向左滑动，然后在右侧显示按钮：https://blog.nraboy.com/2014/12/make-list-items-swipeable-ionic-framework/1

我的问题是：我们是否有可能制作一张卡片＆＃39;可以向左滑动（并显示右侧的选项按钮），也可以向右滑动（并显示左侧的选项按钮）？

对于我的样本笔，当我使用离子列表时，请click here

JavaScript：

angular.module('navTest', ['ionic'])
.controller('TestCtrl', function($scope, $timeout, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};

// Build Mock Data
$scope.items = [
      { from: 'De gea', face: 'https://pbs.twimg.com/profile_images/605749112437387264/LcJGIoOC_400x400.jpg', text: 'Manchester United' },
      { from: 'Iker Casillas', face: 'https://pbs.twimg.com/profile_images/596339467419557888/8Ik_gZLy_400x400.jpg', text: 'Real Madrid' },
      { from: 'Thibaut Courtuis', face: 'https://pbs.twimg.com/profile_images/509399022797615104/_8tezi0H_400x400.jpeg', text: 'Chelsea' },
      { from: 'Manuel Neuer', face: 'https://pbs.twimg.com/profile_images/471230204036145152/tZzWfQxH_400x400.jpeg', text: 'Bayern Munich' },
      { from: 'Joe hart', face: 'https://pbs.twimg.com/profile_images/602513436069724160/6IEAKTGy_400x400.jpg', text: 'Manchester City' }
    ];

    // List Toggles
    $scope.itemClick = function() {
      console.info('itemClick');
      document.getElementById('click-notify').style.display = 'block';
      setTimeout(function(){
        document.getElementById('click-notify').style.display = 'none';
      }, 500);
    };

    // Item Methods/Properties
    $scope.deleteItem = function(item, index) {
      console.log('onDelete from the "item" directive on-delete attribute. Lets not delete this item today ok!', item, index);
    };
    $scope.deleteListItem = function(item, index) {
      console.log('onDelete from the "list" on-delete attribute', item, index);
      $scope.items.splice(index, 1);
    };
    $scope.onReorder = function(el, start, end) {
      console.log('On reorder', el, start, end);
    };

    $scope.optionButtons1 = [
      {
        text: 'Add to Wishlist',
        type: 'button-positive',
        onTap: function(item, button) { alert(button.text + ' Button: ' + item.text) }
      },
      {
        text: 'Buy Now!',
        type: 'button-balanced',
        onTap: function(item, button) { alert(button.text + ' Button: ' + item.text) }
      }
    ];

    $scope.optionButtons2 = [
      {
        text: 'Cancel',
        onTap: function() { alert('CANCEL!') }
      },
      {
        text: 'Submit',
        onTap: function() { alert('SUBMIT!') }
      }
    ];

    $scope.urlItems = [
      { text: 'Biography', icon: 'ion-person', url: 'http://en.wikipedia.org/wiki/Nicolas_Cage' },
      { text: 'Fan Club', icon: 'ion-star', url: 'http://cagealot.com/', isActive: true }
    ];

  });

非常感谢任何建议。

Answer 1

您应该将卡片css选择器应用于离子项目标签（或重复标签）。像在离子列表中一样包含离子选项按钮。你正在实施的“卡片”只是一种造型特征。

<ion-list>
  <ion-item class="card" ng-repeat="">
    <ion-option-button></ion-option-button>
  </ion-item>
</ion-list>

关于从左到右的滑动 - 目前Ionic不支持此功能，但有些人正在努力创建PR并测试所述PR以包含在将来的版本中。

请参阅PR here

如何在Ionic中制作可转换卡（向左或向右）？

1 个答案: