All geek questions in one place

Ionic ion lists turn off wipes

I would like to disable the scrolling of the ion list in ion mode and use it in standby mode.

Already use can-swipe = "false" to disable it, but when you run the showDelete or showReorder action, the swipe is automatically activated again. In any case, to prevent reuse of the wipes?

Here are my codes
HTML

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="false"> <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate" hold-list> 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>

Controller and directive

 angular.module('ionicApp', ['ionic']) .directive('holdList', ['$ionicGesture', function($ionicGesture) { return { restrict: 'A', link: function(scope, element, attrs) { $ionicGesture.on('hold', function(e) { var content = element[0].querySelector('.item-content'); var buttons = element[0].querySelector('.item-options'); var buttonsWidth = buttons.offsetWidth; ionic.requestAnimationFrame(function() { content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s'; if (!buttons.classList.contains('invisible')) { content.style[ionic.CSS.TRANSFORM] = ''; setTimeout(function() { buttons.classList.add('invisible'); }, 250); } else { buttons.classList.remove('invisible'); content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)'; } }); }, element); } }; }]) .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 } ]; });

Codepen

+5
source share
1 answer

As suggested by @Anson, you can handle the click event on the showDelete and showReorder buttons and reapply can-swipe = false .

This can be obtained using the function (see the snippet below $scope.noSwipe ), which executes $ionicListDelegate.canSwipeItems(false); inside $ timeout (). This is necessary to properly delay the operation in order to get around the problem in the current version of Ionic (see the code https://github.com/driftyco/ionic/blob/master/js/angular/directive/list.js#L158 ).

 angular.module('ionicApp', ['ionic']) .directive('holdList', ['$ionicGesture', function($ionicGesture) { return { restrict: 'A', link: function(scope, element, attrs) { $ionicGesture.on('hold', function(e) { var content = element[0].querySelector('.item-content'); var buttons = element[0].querySelector('.item-options'); var buttonsWidth = buttons.offsetWidth; ionic.requestAnimationFrame(function() { content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s'; if (!buttons.classList.contains('invisible')) { content.style[ionic.CSS.TRANSFORM] = ''; setTimeout(function() { buttons.classList.add('invisible'); }, 250); } else { buttons.classList.remove('invisible'); content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)'; } }); }, element); } }; }]) .controller('MyCtrl', function($scope, $ionicListDelegate, $timeout) { $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.noSwipe = function() { console.log("noSwipe"); $timeout(function() { $ionicListDelegate.canSwipeItems(false); }) }; $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 } ]; }); 
 <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 can swipe</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.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; noSwipe();"></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; noSwipe();"> Reorder </button> </div> </ion-header-bar> <ion-content> <ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="false"> <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate" hold-list on-swipe="swipeLeft(item.id)"> 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>
+2
source

Source: https://habr.com/ru/post/1240501/

More articles:


All Articles