반응형
왼쪽에서 오른쪽으로 Ionic 리스트 아이템을 스와이프하는 방법?
Ionic 목록 항목을 양쪽으로 스와이프하고 싶습니다.(즉, 좌-우 및 우-좌).오른쪽 왼쪽 스와이프에는 완벽하게 작동하지만 목록 항목을 왼쪽으로 스와이프할 수 없습니다.
사용했습니다.$ionicGesture좌-우 스와이프의 경우, 또한 사용할 때 알림을 제공합니다.swiperight이벤트:event($ionicGesture.on('swiperight', scope.reportEvent, elem)), 하지만 난 그걸 보여줄 수 없어요ion-option-button
다음은 제 지시 및 컨트롤러 코드입니다.
.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();
};
})
여기 제 html 코드가 있습니다.
<ion-view view-title="Chats">
<ion-content>
<ion-list can-swipe="true">
<ion-item gesture-type="swipeRight" on-swipe-right="swipeRight()" class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="share(item)" side="left">
Share
</ion-option-button>
<ion-option-button class="button-assertive" ng-click="remove(chat)" side="right">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
그래서 왼쪽에 공유 버튼을 표시하고 오른쪽에 삭제 버튼을 표시하고 싶습니다.
누가 구체적인 해결책을 제시해 줄 수 있습니까?
그런 일을 하기 위해 이오닉 립을 편집했습니다.하지만 JS Fiddle이나 Code Peni를 할 수 없었습니다. 수정된 ionic.css와 ionic에 대한 링크를 알려드리겠습니다.bundle.js!
TL;DR
그냥 당신 것으로 대체하고 이온 프로젝트를 시작해요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);
};
}
};
}]);
ionic.css 파일의 왼쪽 버튼에 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; }
이제 ion-list 컨트롤러가 스와이프 방향 속성을 허용하도록 변경합니다.
.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();
});
};
내 솔루션은 완벽하지 않지만 작동합니다. 그리고 이것을 수행하는 다른 방법이 있습니다. Ionic이 어떻게 작동하는지 그리고 Ionic 지시를 어떻게 하는지 더 잘 이해하기 위해 이런 방식으로 수행했습니다.
어떤 피드백이라도 환영하며, 이를 통해 자신만의 피드백을 만들거나 개선할 수 있습니다.
제가 만든item-swipe-panea 안에 컨테이너를 만드는 지시.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>
더 많은 항목-스와이프-판 예제가 Codepen에 있습니다.
참고 사항:
불행하게도Ionic Framework목록 항목의 오른쪽 스와이프(왼쪽에서 오른쪽으로)를 허용하지 않으므로 몇 가지 사항을 수정해야 했습니다.Ionic도서관.다음은 의 수정 사항을 요약한 것입니다.
링크:
Ionic 라이브러리 다운로드를 수정했습니다.
Github의 항목 스와이프 창 지시문입니다.
여기 당신이 그것을 달성할 수 있는 샘플 코드가 있습니다.
pane을 찍다
<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;
}
}
}
다른 답변과 달리, 저는 프레임워크 자체를 편집하는 대신 이온성 v1에 초점을 맞춘 스위퍼(이온성 2에 사용되는 슬라이더 리브로 보임)를 위한 각진 포장지를 만들었습니다.
사용가능npm install ionic-swiperREADME.md 에서 지시한 대로 설치하고 가져오기:
웹팩이 있는 자바스크립트에서 (일반 js처럼 전체 번들도 가져올 수 있음):
import {moduleName as ionicSwiperModule} from 'ionic-swiper';
angular.module('yourModule',[ionicSwiperModule]);
편집:
제가 이 답변을 작성한 이후로 몇 가지 변경 사항이 있어서, 제 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>
다음은 원래 답변의 사용 예입니다.
HTML에서 (일부 CSS도 조정해야 합니다):
<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>
데모의 gif입니다(터치패드에 녹음한 적이 있어서 '끈적끈적'합니다)
언급URL : https://stackoverflow.com/questions/31153543/how-to-swipe-from-left-to-right-ionic-list-item
반응형
'programing' 카테고리의 다른 글
| SQL 데이터베이스에서 데이터를 끌어오려고 할 때 dplyr가 잘못된 테이블 이름을 ON 절에 사용하지 않도록 하는 방법은 무엇입니까? (0) | 2023.10.29 |
|---|---|
| 바탕색으로 버튼에 효과적인 소재감 (0) | 2023.10.29 |
| 파워셸 출력 열폭 (0) | 2023.10.29 |
| 도커를 루트가 아닌 것으로 복사하려면 어떻게 해야 합니까? (0) | 2023.10.29 |
| 사용자 지정 게시물 유형에 대한 읽기 설정에 정적 페이지 추가 (0) | 2023.10.29 |