基于angularJS仿苹果滑屏删除控件

2019独角兽企业重金招聘Python工程师标准>>>

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

依赖项：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);

经测试，可行，写入blog

转载于:https://my.oschina.net/pgyxxkj/blog/603624