AngularJS仿苹果滑屏删除控件

前端技术 2023/09/04 JavaScript

AngularJs被用来开发单页面应用程序（SPA），利用AJAX调用配合页面的局部刷新，可以减少页面跳转，从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制，是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制，即根据不同的url展示不同的视图。

前端开发中，为了对列表项进行快捷操作，有时就添个按钮来简单实现。但是，有时会发现按钮影响美观，甚至影响列表行的布局。稍在网上搜索无果，而写此仿苹果滑屏删除控件。

依赖项：angularJS、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>

首先，要写个angular指令：

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 ? -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仿苹果滑屏删除控件的相关代码，都是小编测试过的，可以放心安全使用。

本文地址：https://www.stayed.cn/item/10100

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案