Question

我想向双方滑动离子列表项。（即左右和右 - 左）。它适用于左右滑动，但我无法将列表项向左侧滑动。

我使用$ionicGesture进行左右滑动，当我使用swiperight事件event($ionicGesture.on('swiperight', scope.reportEvent, elem))时，它也会向我发出警报，但我无法让它显示{ {1}}在左侧。

这是我的指令和控制器代码：

ion-option-button

这是我的HTML代码。

.directive('onSwipeRight', function($ionicGesture) {
  return {
    restrict :  'A',
    link : function(scope, elem, attrs) {
      var gestureType = attrs.gestureType;
      switch(gestureType) {
        case 'swipeRight':
          $ionicGesture.on('swiperight', scope.reportEvent, elem);
          break;
        case 'swipeleft':
          $ionicGesture.on('swipeleft', scope.reportEvent, elem);
          break;
        case 'doubletap':
          $ionicGesture.on('doubletap', scope.reportEvent, elem);
          break;
        case 'tap':
          $ionicGesture.on('tap', scope.reportEvent, elem);
          break;
      }

    }
  }
})

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }

  $scope.reportEvent = function (event) {
    alert("hi");
    console.log('Reporting : ' + event.type);
    event.preventDefault();
};

})

所以我想在左侧显示分享按钮，在右侧显示删除按钮。

有人可以为我提供具体的解决方案吗？

Answer 1

我编辑过离子lib来做类似的事情。但是我不能做JSFiddle或Code Pen我会给你链接到我修改过的ionic.css和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~~

只需将其替换为您的，启动离子项目空白。并将此HTML放入其中：

 <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>

您可以使用左，右或两者指定划像方向。在离子选项按钮中，您可以给它一个侧面。

希望它有所帮助，你只需要问一下！我稍后会尝试在代码中评论我的更改！

编辑：我会试着解释一下我做了什么。

首先更改ionOptionButton指令，为按钮创建div，一个左右一个

 //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);
            };
        }
    };
}]);

将ActiveX添加到ionic.css文件中的左侧按钮

.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; }

现在更改离子列表控制器以接受滑动方向属性

.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();
            };
}]);

要结束，你应该用这个替换slideDrag函数，只需在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();
        });
    };

我的解决方案并不完美，但它确实有效。还有其他方法可以做到这一点，我这样做是为了更好地理解离子的工作原理以及他们如何做离子指令。

欢迎提出任何反馈意见，您可以尝试自己制作或改进此反馈。

Answer 2

我制作item-swipe-pane指令，在ion-item内创建一个容器，当项目向左或向右滑动时可见。

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

属性direction控制滑动方向。可能的值为left或right。保留默认方向。

您可以将任何内容放置在指令，按钮，文本，图像，图标，头像，背景图像等中。

从某种意义上说，容器是非常原始的，你放在其中的所有内容都必须通过CSS或其他方式进行格式化。

item-swipe-pane与ion-option-button，ion-delete-button和ion-reorder-button指令兼容。

可以在同一item-swipe-pane上合并两个ion-item。每个都有不同的滑动方向。

示例包含两个项目 - 滑动窗格，一个位于左侧，另一个位于右侧：

<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在Codepen上。

重要提示：

不幸的是Ionic Framework不允许对列表项进行右键滑动（从左到右），因此我必须对Ionic库进行一些修改。这是summary of modifications to Ionic Framework。

<强>链接：

Modified Ionic library下载。

Github上的

item-swipe-pane指令。

Answer 3

这是一个使用你可以实现它的示例代码

滑动-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>

滑动-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");

滑动-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;
    }
  }
}

Answer 4

与其他答案不同，我为swiper创建了一个角度包装器（似乎是离子2中使用的滑块lib），专注于离子v1，而不是编辑框架本身。

我的包装器是可用的here，并且有一个演示here。

您可以使用ActionMap进行安装，并按照README.md上的说明导入：

在带有webpack的javascript中（你可以像普通的js一样导入整个包）：

npm install ionic-swiper

修改

自从我写完这个答案以来，我做了一些更改，所以这里有一个更正确的方法来使用我的lib：

import {moduleName as ionicSwiperModule} from 'ionic-swiper'; angular.module('yourModule',[ionicSwiperModule]);

以下是原始答案用法示例：

在HTML中（您还需要调整一些css）：

<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' }}">   <left-swiper class="side-item"> Left </left-swiper>  <central-swiper class="central-item"> Central {{:: containerId}} </central-swiper>  <right-swiper class="side-item"> Right </right-swiper> </ionic-swiper>

这是演示中的一个gif（我在触摸板中录制了这个，这就是为什么它看起来很“粘”）

如何从左到右滑动离子列表项？

4 个答案: