使用vue directive 写好的滑动删除功能

最新推荐文章于 2024-07-18 09:42:02 发布

weixin_33753003

最新推荐文章于 2024-07-18 09:42:02 发布

阅读量238

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhoujx1066/p/6846483.html

版权

虽然不堪入眼，但其中也遇到了不少的坑，此而记下：

directives:{
      moveDel:{
        bind: function (el,binding) {
          let _this = this;
          setTimeout(function () {
//            el.style.background = 'red';
//            console.log(binding.value.index);
            let MaxWidth = $('.informationLi-del').width();
            let startX,moveX,movestartX,endX,startTime,endTime,continueTime,isCurrent,step;
            el.addEventListener('touchstart',e => {
              e.preventDefault();
              startX = e.changedTouches[0].pageX;
              startTime = new Date().getTime();
              if($(el).hasClass('sele')){
                  isCurrent = true;
              }else {
                isCurrent = false;
              }
            });
            el.addEventListener('touchmove', e =>{
              e.preventDefault();
              movestartX = e.changedTouches[0].pageX;
              if(!isCurrent){
                endX = 0;
                $(el).siblings().css('transform','translateX(0px)');
              }
              if(endX){
                moveX = movestartX-(startX-endX);
              }else {
                moveX = movestartX-startX;
              }

              $(el).css('transform','translateX('+moveX+'px)');
              if((Math.abs(moveX)>=MaxWidth*2)&&(moveX<0)){

                $(el).css('transform','translateX('+moveX+'px)');
                $(el).css('transform','translateX('+(-MaxWidth*2)+'px)');

              }else if((Math.abs(moveX)>=0)&&(moveX>0)){
                $(el).css('transform','translateX(0px)');
              }

            });
            el.addEventListener('touchend',e => {
              e.preventDefault();

              $(el).siblings().removeClass('sele');
              $(el).addClass('sele');
              endX = e.changedTouches[0].pageX;
              endTime = new Date().getTime();

              continueTime = endTime-startTime;
              if((Math.abs(moveX)>=2*MaxWidth)&&(moveX<0)&&continueTime>50){
                binding.value.del(binding.value.index);
                endX = 0;
                $(el).css('transform','translateX(0px)');
              }else if((Math.abs(moveX)<=MaxWidth)&&(moveX<0)){
                endX = 0;
                step = (0-moveX)/20;
                let timerId = setInterval(function () {
                  moveX = moveX+step;
                  $(el).css('transform','translateX('+moveX+'px)');
                  if(moveX>=0){
                    clearInterval(timerId);
                    $(el).css('transform','translateX(0px)');
                  }
                },10);
              }else if(moveX>0){
                endX = 0;
                $(el).css('transform','translateX(0px)');
              }else {
                endX = 0;
                step = (0-moveX)/20;
                let timerId = setInterval(function () {
                  moveX = moveX+step;
                  $(el).css('transform','translateX('+moveX+'px)');
                  if(moveX>=0){
                    clearInterval(timerId);
                    $(el).css('transform','translateX(0px)');
                  }
                },10);
              }
            });
          },20);
        },
        unbind: function () {
          
        }
      }

转载于:https://www.cnblogs.com/zhoujx1066/p/6846483.html