AngularJS는 Apple 슬라이딩 화면 삭제 제어를 모방합니다._AngularJS

AngularJ는 단일 페이지 애플리케이션(SPA)을 개발하는 데 사용됩니다. AJAX 호출은 페이지의 부분 새로 고침과 협력하여 페이지 이동을 줄이고 더 나은 사용자 경험을 얻을 수 있습니다. Angular의 ngView와 그에 상응하는 강력한 라우팅 메커니즘은 SPA 애플리케이션을 구현하기 위한 핵심 모듈입니다. 이 문서에서 언급된 페이지 전환은 다른 URL에 따라 다른 보기를 표시하는 이 라우팅 메커니즘을 나타냅니다.

프런트 엔드 개발에서는 목록 항목에 대한 빠른 작업을 수행하기 위해 때로는 버튼을 추가하는 것이 간단합니다. 그러나 때로는 버튼이 미적 측면은 물론 목록 행의 레이아웃에도 영향을 미치는 경우가 있습니다. 인터넷에서 약간의 검색을 한 후, 나는 이 모방된 Apple 슬라이딩 화면 삭제 컨트롤을 작성했습니다.

종속성: angleJS, jQuery

테스트 브라우저: Chrome, IE11, 모바일 브라우저

원래 목록 항목 코드:

<div class="row-class" ng-repeat="item in list">
这是整行显示的内容
</div>

개발 목표:

<div class="row-class" ng-repeat="item in list" slide-delete text="删除" ondelete="ondelete(item)">
这是整行显示的内容
</div>

먼저 각도 명령을 작성합니다.

myapp.directive('slideDelete', function() {
return {
restrict: 'AE',
scope: {
text: "@",
ondelete: "&"
},
link: function (scope, element, attrs) {
var w = $(element).outerWidth ();//应显示的宽度
var h = $(element).outerHeight();//应显示的高度
//按钮宽度
var btn_w = 60;
//设计按钮：
scope.btn = $('<div style="position:absolute;z-index:5998;right:0;top:0;width:'+btn_w+'px;height:'+h+'px;color:#fff;background-color:#900;text-align:center;padding-top:10px">'+(scope.text||'删除')+'</div>');
//改造行,用一个绝对定位div将内容包裹起来
$(element).contents().wrapAll('<div new_box style="position:absolute;z-index:5999;left:0;top:0;width:'+w+'px;height:'+h+'px;background-color:#fff;"></div>');
//添加按钮：
$(element).css({overflow:"hidden", position:"relative", "z-index":5999}).append(scope.btn)
//滑屏功能
.slideable({
getLeft: function(self){return self.children(":first-child").position().left;},
setLeft: function(self, x){ self.children(":first-child").css({left: x<-btn_w && -btn_w || x<0 && x || 0});},
onslide: function(self, x){
scope.open = x < -btn_w / 2;
self.css("z-index", scope.open && 6001 || 5999);
//背景，点击收起
var bk = $.fixedBackground(6000, scope.open);
scope.open && bk.data("self", self).click(function(){
var self = bk.data("self");
$.fixedBackground(6000, false);
self && self.css("z-index", 5999).children(":first-child").animate({left: 0},100);
});
self.children(":first-child").animate({left: scope.open &#63; -btn_w : 0},100);
}
})
//按钮事件
scope.btn.click(function(){
scope.ondelete && scope.ondelete();
$.fixedBackground(6000, 1).click();//关闭背景
});
}
};
});

또 다른 슬라이딩 이벤트 클래스를 작성하세요. 물론 마우스와 호환되어야 합니다

(function($){
$.fn.slideable = function(options){
var self = this;
self.options = options;
self.left = 0;
self.down = 0;
self.pressed = false;
self.bindobj = options.bindobj || self;
self.bindobj.bind("mousedown",function(event){ onmousedown(self, event); })
self.bindobj.bind("mousemove",function(event){ onmousemove(self, event); })
self.bindobj.bind("mouseup" ,function(event){ onmouseup (self, event); })
self.bindobj[0].addEventListener('touchstart', function(event) { onmousedown(self, {screenX: event.changedTouches[0].pageX}); })
self.bindobj[0].addEventListener('touchmove' , function(event) { onmousemove(self, {screenX: event.changedTouches[0].pageX}); })
self.bindobj[0].addEventListener('touchend' , function(event) { onmouseup (self, {screenX: event.changedTouches[0].pageX}); })
return this;
}
function onmousedown(self, event){
self.down = event.screenX;
self.options.onmousedown && self.options.onmousedown(self);
self.left = self.options.getLeft && self.options.getLeft(self) || 0;
self.pressed = true;
}
function onmousemove(self, event){
self.pressed && self.options.setLeft && self.options.setLeft(self, self.left + event.screenX - self.down);
}
function onmouseup(self, event){
self.pressed = false;
self.left += event.screenX - self.down;
self.options.onslide && self.options.onslide(self, self.left);
}
//背景功能
$.fixedBackground = function(z_index, b_show){
var bk = $('#fixed-background-'+z_index+'');
if(!b_show)return bk && bk.remove();
if(!(bk && bk.length>0)){
bk = $('<div id="fixed-background-'+z_index+'" style="position:fixed;z-index:'+z_index+';left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0)">');
$("body").append(bk);
}
return bk;
}
})(jQuery);

위에서 소개한 AngularJS 모방 Apple 슬라이딩 화면 삭제 제어 코드에 대해서는 에디터의 테스트를 거쳐 안전하게 사용할 수 있습니다.