How to swipe from left to right Ionic list item?

后端未结

关注

 4  1459

I want to swipe Ionic list items to both sides. (i.e left-right AND right-left). It works perfectly for right-left swipe but I am not able to swipe list item to left side.

相关标签:

4条回答

逝去的感伤

2020-12-13 10:27

I've edited ionic lib to do something like that. But i couldn't do a JSFiddle or a Code Pen i Will give you the link to my modified ionic.css and ionic.bundle.js!

TL;DR

~~https://gist.githubusercontent.com/booris/847f044d2ef2a05101ce/raw/2274365384f5eed3e4538b269f3a7d7998eb22ed/ionic.css~~

~~https://gist.githubusercontent.com/booris/847f044d2ef2a05101ce/raw/2274365384f5eed3e4538b269f3a7d7998eb22ed/ionic.bundle.js~~

Just replace it with yours, start an ionic project blank. And put this HTML in it:

 <body ng-app="starter">
       <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
                <ion-list show-delete="false" can-swipe="true" swipe-direction="both">
                    <ion-item href="#">
                        Item 1
                        <ion-option-button side="right" class="button-light icon ion-heart"></ion-option-button>
                        <ion-option-button side="right" class="button-light icon ion-email"></ion-option-button>
                        <ion-option-button side="left" class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                    <ion-item href="#">
                        Item 2
                        <ion-option-button class="button-light icon ion-heart"></ion-option-button>
                        <ion-option-button class="button-light icon ion-email"></ion-option-button>
                        <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-pane>
  </body>

You can specify the wipe direction with left, right or both. And in the ion-options-button you can give it a side.

Hope it helps, anything you need just ask! I will try to comment my changes in the code later on!

EDIT: I will try to explain what i did.

First change the ionOptionButton directive to create to div for the button, one left and one right

 //added second div with class item-options-left for the left buttons

var ITEM_TPL_OPTION_BUTTONS =
        '<div class="item-options invisible">' +
        '</div>' + '<div class="item-options-left invisible">' + 
        '</div>';
IonicModule.directive('ionOptionButton', [function () {
    function stopPropagation(e) {
        e.stopPropagation();
    }
    return {
        restrict: 'E',
        require: '^ionItem',
        priority: Number.MAX_VALUE,
        compile: function ($element, $attr) {
            $attr.$set('class', ($attr['class'] || '') + ' button', true);
            return function ($scope, $element, $attr, itemCtrl) {

                if (!itemCtrl.optionsContainer) {
                    itemCtrl.optionsContainer = jqLite(ITEM_TPL_OPTION_BUTTONS);
                    itemCtrl.$element.append(itemCtrl.optionsContainer);
                }

                //[NEW] if it as an attribute side = 'left' put the button in the left container
                if ($attr.side === 'left') {
                    angular.element(itemCtrl.optionsContainer[1]).append($element);
                    itemCtrl.$element.addClass('item-left-editable');
                } else{
                    angular.element(itemCtrl.optionsContainer[0]).append($element);
                    itemCtrl.$element.addClass('item-right-editable');
                }

                //Don't bubble click up to main .item
                $element.on('click', stopPropagation);
            };
        }
    };
}]);

Add CSS to left buttons in ionic.css file

.item-options-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%; }
.item-options-left .button {
  height: 100%;
  border: none;
  border-radius: 0;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }
.item-options .button:before {
  margin: 0 auto; }

Now change the ion-list controller to accept swipe directions attribute

.controller('$ionicList', [
  '$scope',
  '$attrs',
  '$ionicListDelegate',
  '$ionicHistory',
function ($scope, $attrs, $ionicListDelegate, $ionicHistory) {
            var self = this;

            //[NEW] object with can-swipe attr and swipe-direction side attr, default direction is left
            var swipe = {
                isSwipeable: true,
                side: 'left'
            };
            var isReorderShown = false;
            var isDeleteShown = false;

            var deregisterInstance = $ionicListDelegate._registerInstance(
                self, $attrs.delegateHandle,
                function () {
                    return $ionicHistory.isActiveScope($scope);
                }
            );
            $scope.$on('$destroy', deregisterInstance);

            self.showReorder = function (show) {
                if (arguments.length) {
                    isReorderShown = !!show;
                }
                return isReorderShown;
            };

            self.showDelete = function (show) {
                if (arguments.length) {
                    isDeleteShown = !!show;
                }
                return isDeleteShown;
            };

            //[NEW] get swipe direction attribute and store it in a variable to access in other function
            self.canSwipeItems = function (can) {
                if (arguments.length) {
                    swipe.isSwipeable = !!can;
                    swipe.side = $attrs.swipeDirection;
                }
                return swipe;
            };

            self.closeOptionButtons = function () {
                self.listView && self.listView.clearDragEffects();
            };
}]);

To end, you should replace slideDrag function with this one, just search for it in ionic.bundle.js

//[NEW] add this var to the others in the function
var ITEM_OPTIONS_CLASS_RIGHT = 'item-options-left';

var SlideDrag = function (opts) {
        this.dragThresholdX = opts.dragThresholdX || 10;
        this.el = opts.el;
        this.item = opts.item;
        this.canSwipe = opts.canSwipe;
    };

    SlideDrag.prototype = new DragOp();

    SlideDrag.prototype.start = function (e) {
        var content, buttonsLeft, buttonsRight, offsetX, buttonsLeftWidth, buttonsRightWidth;

        if (!this.canSwipe().isSwipeable) {
            return;
        }

        if (e.target.classList.contains(ITEM_CONTENT_CLASS)) {
            content = e.target;
        } else if (e.target.classList.contains(ITEM_CLASS)) {
            content = e.target.querySelector('.' + ITEM_CONTENT_CLASS);
        } else {
            content = ionic.DomUtil.getParentWithClass(e.target, ITEM_CONTENT_CLASS);
        }

        // If we don't have a content area as one of our children (or ourselves), skip
        if (!content) {
            return;
        }

        // Make sure we aren't animating as we slide
        content.classList.remove(ITEM_SLIDING_CLASS);

        // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
        offsetX = parseFloat(content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;

        // Grab the buttons
        buttonsLeft = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
        if (!buttonsLeft) {
            return;
        }

        //[NEW] get the Right buttons
        buttonsRight = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS_RIGHT);
        if (!buttonsRight) {
            return;
        }

        // [NEW] added the same functionality to both sides, to make buttons visible when dragged
        if(e.gesture.direction === "left")
            buttonsLeft.classList.remove('invisible');
        else
            buttonsRight.classList.remove('invisible');

        //[NEW] added buttonRight and buttonLeft properties to currentDrag

        buttonsLeftWidth = buttonsLeft.offsetWidth;
        buttonsRightWidth = buttonsRight.offsetWidth;

        this._currentDrag = {
            buttonsLeft: buttonsLeft,
            buttonsRight: buttonsRight,
            buttonsLeftWidth: buttonsLeftWidth,
            buttonsRightWidth: buttonsRightWidth,
            content: content,
            startOffsetX: offsetX
        };
    };

    /**
     * Check if this is the same item that was previously dragged.
     */
    SlideDrag.prototype.isSameItem = function (op) {
        if (op._lastDrag && this._currentDrag) {
            return this._currentDrag.content == op._lastDrag.content;
        }
        return false;
    };

    SlideDrag.prototype.clean = function (isInstant) {
        var lastDrag = this._lastDrag;

        if (!lastDrag || !lastDrag.content) return;

        lastDrag.content.style[ionic.CSS.TRANSITION] = '';
        lastDrag.content.style[ionic.CSS.TRANSFORM] = '';
        if (isInstant) {
            lastDrag.content.style[ionic.CSS.TRANSITION] = 'none';
            makeInvisible();
            ionic.requestAnimationFrame(function () {
                lastDrag.content.style[ionic.CSS.TRANSITION] = '';
            });
        } else {
            ionic.requestAnimationFrame(function () {
                setTimeout(makeInvisible, 250);
            });
        }

        function makeInvisible() {
            lastDrag.buttonsLeft && lastDrag.buttonsLeft.classList.add('invisible');
            lastDrag.buttonsRight && lastDrag.buttonsRight.classList.add('invisible');
        }
    };

    SlideDrag.prototype.drag = ionic.animationFrameThrottle(function (e) {
        var buttonsLeftWidth;
        var buttonsRightWidth;

        // We really aren't dragging
        if (!this._currentDrag) {
            return;
        }

        // Check if we should start dragging. Check if we've dragged past the threshold,
        // or we are starting from the open state.
        if (!this._isDragging &&
            ((Math.abs(e.gesture.deltaX) > this.dragThresholdX) ||
                (Math.abs(this._currentDrag.startOffsetX) > 0))) {
            this._isDragging = true;
        }

        if (this._isDragging) {
            buttonsLeftWidth = this._currentDrag.buttonsLeftWidth;
            buttonsRightWidth = this._currentDrag.buttonsRightWidth;

            // Grab the new X point, capping it at zero
            //[NEW] added right swipe new position
            if (this.canSwipe().side === 'left' || (this.canSwipe().side === 'both' && e.gesture.direction === 'left'))
                var newX = Math.min(0, this._currentDrag.startOffsetX + e.gesture.deltaX);
            else if (this.canSwipe().side === 'right' || (this.canSwipe().side === 'both' && e.gesture.direction === 'right'))
                var newX = Math.max(0, this._currentDrag.startOffsetX + e.gesture.deltaX);

            var buttonsWidth = 0;
            if (e.gesture.direction === 'right')
                buttonsWidth = buttonsRightWidth;
            else
                buttonsWidth = buttonsLeftWidth;
            // If the new X position is past the buttons, we need to slow down the drag (rubber band style) 
            if (newX < -buttonsWidth) {
                // Calculate the new X position, capped at the top of the buttons
                newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
            }



            this._currentDrag.content.$$ionicOptionsOpen = newX !== 0;

            this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + newX + 'px, 0, 0)';
            this._currentDrag.content.style[ionic.CSS.TRANSITION] = 'none';
        }
    });

    SlideDrag.prototype.end = function (e, doneCallback) {
        var self = this;

        // There is no drag, just end immediately
        if (!self._currentDrag) {
            doneCallback && doneCallback();
            return;
        }

        // If we are currently dragging, we want to snap back into place
        // The final resting point X will be the width of the exposed buttons
        var restingPoint;
        if (e.gesture.direction === 'left' && (this.canSwipe().side === 'left' || this.canSwipe().side === 'both'))
            restingPoint = -self._currentDrag.buttonsLeftWidth;
        if (e.gesture.direction === 'right' && (this.canSwipe().side === 'right' || this.canSwipe().side === 'both'))
            restingPoint = self._currentDrag.buttonsRightWidth;

        // Check if the drag didn't clear the buttons mid-point
        // and we aren't moving fast enough to swipe open
        var buttonsWidth = 0;
        if (e.gesture.direction === 'right') 
            buttonsWidth = self._currentDrag.buttonsRightWidth;
        else 
            buttonsWidth = self._currentDrag.buttonsLeftWidth;
        if (e.gesture.deltaX > -(buttonsWidth / 2)) {

            // If we are going left or right but too slow, or going right, go back to resting
            if ((e.gesture.direction == "left" || e.gesture.direction == "right")  && Math.abs(e.gesture.velocityX) < 0.3) {
                restingPoint = 0;
            } 

        }

        ionic.requestAnimationFrame(function () {
            if (restingPoint === 0) {
                self._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
                var buttonsLeft = self._currentDrag.buttonsLeft;
                var buttonsRight = self._currentDrag.buttonsRight;
                setTimeout(function () {
                    buttonsLeft && buttonsLeft.classList.add('invisible');
                    buttonsRight && buttonsRight.classList.add('invisible');
                }, 250);
            } else {
                self._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + restingPoint + 'px,0,0)';
            }
            self._currentDrag.content.style[ionic.CSS.TRANSITION] = '';


            // Kill the current drag
            if (!self._lastDrag) {
                self._lastDrag = {};
            }
            ionic.extend(self._lastDrag, self._currentDrag);
            if (self._currentDrag) {
                self._currentDrag.buttons = null;
                self._currentDrag.content = null;
            }
            self._currentDrag = null;

            // We are done, notify caller
            doneCallback && doneCallback();
        });
    };

My solution is not perfect, but it works. and there are others ways of doing this, i did it this way to understand better how Ionic works and how they do Ionic directives.

Any feedback is welcome, and with this you can try to make your own or improve this one.

0 讨论(0)

南方客

2020-12-13 10:29

here is an sample code using that u can achieve it

swipe-pane.html

   <div class="mk-swipe-pane">
        <div class="col-xs-4 swipe-actions-padding" ng-repeat="action in swipeActions">
            <div  ng-click="currentActionClick(action.actionName)"
                   ng-class="[action.actionCssclass]">
                    <div class="icon-font-size">
                        <i ng-class="[action.actionIcon]"></i>
                    </div>
                {{action.actionName}}
            </div>
         </div>
    </div>

swipe-pane.js

angular.module('mk.Directives')
    .directive('mkSwipePane', function ($swipe) {
        return {
            templateUrl: "lib/mobikon/directives/notifications/swipe-pane/swipe-pane.html",
            restrict: 'E',
            scope: {
                swipeActions: "="
            },
            replace: true,
            link: function ($scope, element) {

                var MAX_VERTICAL_DISTANCE = 75,
                    MAX_VERTICAL_RATIO = 0.3,
                    MIN_HORIZONTAL_DISTANCE = 30,
                    startCoords,
                    valid,
                    elWidth = $(element).width(),
                    direction = 1,
                    pointerTypes = ['touch'],
                    delayForAnimation = 70;

                $scope.currentActionClick = function (actionName) {
                    $scope.$emit('currentActionName', actionName);
                };

                function validSwipe(coords) {
                    if (!startCoords) return false;
                    var deltaY = Math.abs(coords.y - startCoords.y);
                    var deltaX = (coords.x - startCoords.x) * direction;
                    return valid && // Short circuit for already-invalidated swipes.
                        deltaY < MAX_VERTICAL_DISTANCE &&
                        deltaX > 0 &&
                        deltaX > MIN_HORIZONTAL_DISTANCE &&
                        deltaY / deltaX < MAX_VERTICAL_RATIO;
                }

                $swipe.bind(element, {
                    'start': function (coords, event) {
                        startCoords = coords;
                        valid = true;
                    },
                    'move': function (coords, event) {

                        var diffX = coords.x - startCoords.x;
                        if (diffX < 0) {
                            direction = -1; // For left swipe
                        } else {
                            direction = 1; // For right swipe
                        }
                        if (validSwipe(coords)) {
                            var marginLeft = parseInt($(element).css("marginLeft"));
                            if (direction === -1 && Math.abs(diffX) <= elWidth / 2) {
                                $(element).prev().css({"margin-left": diffX});
                            } else if (direction === 1 && (marginLeft + diffX) <= 0) {
                                $(element).prev().css({"margin-left": marginLeft + diffX});
                            }
                        }
                    },
                    'cancel': function (event) {
                        valid = false;
                    },
                    'end': function (coords, event) {
                        if (validSwipe(coords)) {
                            if (direction === -1) {
                                $(element).prev().animate({"margin-left": "-50%"}, delayForAnimation);
                                $scope.$emit('isCurrentRowClickable', {isSwiped: false});
                            } else {
                                $(element).prev().animate({"margin-left": "0%"}, delayForAnimation);
                                $scope.$emit('isCurrentRowClickable', {isSwiped: true});

                            }
                        }
                    }
                }, pointerTypes);
            }
        }
    });

require("./swipe-pane.html");
require("./swipe-pane.scss");

swipe-pane.scss

@import "../../../../../views/mixins";

[mk-swipe-pane], .mk-swipe-pane {

  display: inline-block;
  width: 50%;
  $icon-outline-color: $mk-pure-white;
  $icon-font-size: 35px;
  $icon-text-font-size: 16px;
  $icon-margin-top:-10px;
  $icon-padding-top:35%;
  $icon-padding-bottom:5px;
  $icon-container-height:120px;
  $icon-width:20px;

  @media screen and (max-width: 768px) {

     .swipe-actions-padding {
      padding-left: 0px;
      padding-right: 0px;
      float: none;
      display: inline-block;
     }

    .icon-font-size {
      font-size: $icon-font-size;
    }

    .email-icon {
      text-align: center;
      font-size: $icon-text-font-size;
      margin-top: $icon-margin-top;
      padding-top: $icon-padding-top;
      height: $icon-container-height;
      vertical-align: middle;
      background-color: $mk-swipe-action-1-icon-background-orange;
      color: $icon-outline-color;
    }

    .sms-icon {
      text-align: center;
      font-size: $icon-text-font-size;
      margin-top: $icon-margin-top;
      padding-top: $icon-padding-top;
      height: $icon-container-height;
      vertical-align: middle;
      background-color: $mk-swipe-action-2-icon-background-blue;
      color: $icon-outline-color;
    }

    .call-icon {
      text-align: center;
      font-size: $icon-text-font-size;
      margin-top: $icon-margin-top;
      padding-top: $icon-padding-top;
      height: $icon-container-height;
      vertical-align: middle;
      background-color: $mk-swipe-action-3-icon-background-green;
      color: $icon-outline-color;
    }

    .disabled {
      background-color: $mk-background-gray !important;
    }
  }
}

0 讨论(0)

梦毁少年i

2020-12-13 10:33

I made item-swipe-pane directive which creates a container inside a ion-item, which is visible when the item is swiped to the left or to the right.

var ITEM_SWIPE_PANE_TPL = '<div class="item-options invisible item-swipe-pane"></div>';
var DIRECTION_RIGHT_CLASS = 'direction-right';
module.directive( 'itemSwipePane' , function() {
    return {
        restrict:   'E',
        require:    '^ionItem',
        link: function (scope, $element, attrs, itemCtrl) {
            var container;
            var direction = 'left';
            // Set direction
            if (attrs['direction'] && attrs['direction'] === 'right'){
                direction = 'right';
            } else if (attrs['direction'] && attrs['direction'] === 'left'){
                direction = 'left';
            }

            if (direction === 'left'){
                if (!itemCtrl.itemSwipeLeft){
                    itemCtrl.itemSwipeLeft = angular.element(ITEM_SWIPE_PANE_TPL);
                    itemCtrl.$element.append(itemCtrl.itemSwipeLeft);
                }
                container = itemCtrl.itemSwipeLeft;
            } else if (direction === 'right'){
                if (!itemCtrl.itemSwipeRight){
                    itemCtrl.itemSwipeRight = angular.element(ITEM_SWIPE_PANE_TPL);
                    // If direction is right, move position of item options
                    // to the left - override inherited right:0; 
                    itemCtrl.itemSwipeRight.css({right: 'auto'});
                    // "direction-right" is container selector. 
                    itemCtrl.itemSwipeRight.addClass(DIRECTION_RIGHT_CLASS);
                    itemCtrl.$element.append(itemCtrl.itemSwipeRight);
                }
                container = itemCtrl.itemSwipeRight;
            }

            container.append($element);
            // Animation to slowly close opened item.
            itemCtrl.$element.addClass('item-right-editable');
        } // link

    }; // return
}); // item-swipe-pane

Attribute direction controls swipe direction. Possible values are left or right. Default direction is left.

You can place any content it the directive, button, text, image, icon, avatar, background image, etc.

The container is quite raw in a sense that everything you place in it has to be formatted by CSS or by other means.

item-swipe-pane is compatible with ion-option-button, ion-delete-button and ion-reorder-button directives.

It is possible to combine two item-swipe-panes on the same ion-item. Each one with different swipe direction.

Example with two item-swipe-panes, one is on the left and one on the right:

<ion-item>
  Two item-swipe-panes. One on the left, one on the right.
  <item-swipe-pane direction="right">
    <button class="button button-balanced ion-arrow-right-c"></button>
    <button class="button button-positive">Update</button>
    <button class="button button-royal">Add</button>
  </item-swipe-pane>

  <item-swipe-pane class="left-pane">
    <button class="button button-assertive">Delete</button>
    <button class="button button-calm">Share</button>
    <button class="button button-balanced ion-arrow-left-c"></button>
  </item-swipe-pane>        
</ion-item>

More item-swipe-pane examples are on Codepen.

Important note:

Unfortunately Ionic Framework does not allow right swipe (from left to right) of a list item, so I had to make few modifications to the Ionic library. Here is summary of modifications to Ionic Framework.

Links:

Modified Ionic library download.

item-swipe-pane directive on Github.

0 讨论(0)

后悔当初

2020-12-13 10:38

Unlike other answers, i've created an angular wrapper for swiper (that seems to be the slider lib used in ionic 2) focused on ionic v1 instead of editing the framework itself.

My wrapper is avaliable here, and there's an demo here.

You can use npm install ionic-swiper to install it, and import like instructed on README.md:

In javascript with webpack (you can import the whole bundle too like a normal js):

import {moduleName as ionicSwiperModule} from 'ionic-swiper';

angular.module('yourModule',[ionicSwiperModule]);

Edit:

I've made some changes since i wrote this answer, so here's a more correct way to use my lib:

<ionic-swiper ng-repeat="i in [1,2,3]"
              center-on-disable="{{ true || 'disable default center on disable behavior'}}"
              is-swipable="{{ true || 'some prop to watch' }}"
              left-swiper="{{:: true || 'or any prop that evaluate to a boolean' }}"
              right-swiper="{{:: true || 'or any prop that evaluate to a boolean' }}">
    <!-- containerId is available inside this context -->

    <!-- Left transclude is optional -->
    <left-swiper class="side-item">
        Left
    </left-swiper>

    <!-- Central transclude is required -->
    <central-swiper class="central-item">
       Central {{:: containerId}}
    </central-swiper>

    <!-- Right transclude is optional -->
    <right-swiper class="side-item">
        Right
    </right-swiper>
</ionic-swiper>

And here's the original answer usage example:

In HTML (you will need to adjust some css too):

<ionic-list>
    <div 
        swiper-container="true"
        class="swiper-container" 
        ng-repeat="item in [1,2,3,4,5,6]">
      <!-- containerId is available inside this context -->

      <div class="swiper-wrapper">
                <ion-item swiper-slide="center">
                  This swiper container id is {{:: containerId }}
                </ion-item>
                <ion-item swiper-slide="right">
                    Right Button
                </ion-item>
                <ion-item swiper-slide="left">
                    Left Button
                </ion-item>
        </div>
    </div>
</ionic-list>

Here's an gif from the demo (i've recorded this in a touchpad, that's why it seems 'sticky')

0 讨论(0)