如何在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卡（左側或右側）？

回答

相關問題