angularjs – 如何从左到右滑动离子列表项？
发布时间：2020-12-17 08:12:57 所属栏目：安全 来源：网络整理
导读：我想将双子座的列表项目滑动。 (即左右和右 – 左)。它完美地用于右键滑动，但是我无法将列表项目滑动到左侧。 我使用$ ionGesture进行左右滑动，当我使用swiperight事件：event($ ionGesture.on(‘swiperight’，scope.reportEvent，elem))时，它也给了我一
|
我想将双子座的列表项目滑动。 (即左右和右 – 左)。它完美地用于右键滑动，但是我无法将列表项目滑动到左侧。
我使用$ ionGesture进行左右滑动，当我使用swiperight事件：event($ ionGesture.on(‘swiperight’，scope.reportEvent，elem))时，它也给了我一个警报，但是我不能让它显示左侧的离子选项按钮。 这是我的指令和控制器代码： .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',elem);
break;
case 'doubletap':
$ionicGesture.on('doubletap',elem);
break;
case 'tap':
$ionicGesture.on('tap',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>
所以我想在左边显示分享按钮，右边的删除按钮。 有人可以为我提供具体的解决方案吗？
我已经编辑了离子类lib来做这样的事情。但我不能做一个JSFiddle或代码笔，我会给你链接到我的修改ion.css和ion.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);
};
}
};
}]);
在ion.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; }
现在更改离子列表控制器以接受滑动方向属性 .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函数，只是在ion.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)';
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)';
}
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指令。 欢迎任何反馈，您可以尝试自己制作或改进此功能。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |