如何在Ionic中制作swipable卡（左侧或右侧）？

我正在尝试使“卡”可以在Ionic中左右滑动。我发现一个教程，使列表项可以滑动到左侧，然后显示右边的按钮：https://blog.nraboy.com/2014/12/make-list-items-swipeable-ionic-framework/1 如何在Ionic中制作swipable卡（左侧或右侧）？

我的问题是：是否有可能让我们使'卡'可以滑动到左侧（并显示右侧的选项按钮），也可以向右滑动（并显示左侧的选项按钮）？

对于我的样品笔，而我用离子名单的工作，请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 } 
    ]; 

    });

任何意见将不胜感激。

来源

2015-06-22 Harkedian

你弄清楚如何使一个“卡”可以滑动到在离子左右？ – Yatin

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

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

对于左向右轻扫 - 离子目前不支持此功能，但是还有人在努力创造一个PR和测试说PR已经包含在未来的版本。

见Pr here

来源

2016-05-25 04:00:30 Vince

感谢您的解释，@Vince！ – Harkedian

没问题，如果它解决了你的问题，请点击这个答案（Y）@Harkedian – Vince

如何在Ionic中制作swipable卡（左侧或右侧）？

回答

相关问题