1. 定义一个监听touch指令,主要根据计算开始到结束滑动的位置计算X、Y轴相应的距离再计算角度来判断滑动的方向
    directives:{
    	//滑动指令
    	touch:{
        bind: function (el, binding, vnode) {
          var touchType = binding.arg; //传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
          var timeOutEvent = 0;
          var direction = '';
          //滑动处理
          var startX, startY;
    
          //返回角度
          function GetSlideAngle(dx, dy) {
            return Math.atan2(dy, dx) * 180 / Math.PI;
          }
    
          //根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
          function GetSlideDirection(startX, startY, endX, endY) {
            var dy = startY - endY;
            var dx = endX - startX;
            var result = 0;
    
            //如果滑动距离太短
            if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
              return result;
            }
    
            var angle = GetSlideAngle(dx, dy);
            if (angle >= -45 && angle < 45) {
              result = 'swiperight';
            } else if (angle >= 45 && angle < 135) {
              result = 'swipeup';
            } else if (angle >= -135 && angle < -45) {
              result = 'swipedown';
            }
            else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
              result = 'swipeleft';
            }
            return result;
          }
    
          el.addEventListener('touchstart', function (ev) {
            startX = ev.touches[0].pageX;
            startY = ev.touches[0].pageY;
    
            //判断长按
            timeOutEvent = setTimeout(() =>{
              timeOutEvent = 0 ;
              if(touchType === 'press'){
                  binding.value()
              }
            } , 500);
    
          }, false);
    
          el.addEventListener('touchmove' , function (ev) {
            clearTimeout(timeOutEvent)
            timeOutEvent = 0;
          });
    
          el.addEventListener('touchend', function (ev) {
            var endX, endY;
            endX = ev.changedTouches[0].pageX;
            endY = ev.changedTouches[0].pageY;
            direction = GetSlideDirection(startX, startY, endX, endY);
    
            clearTimeout(timeOutEvent)
    
            switch (direction) {
              case 0:
                break;
              case 'swipeup':
                if(touchType === 'swipeup'){
                    binding.value()
                }
                break;
              case 'swipedown':
                if(touchType === 'swipedown'){
                    binding.value()
                }
                break;
              case 'swipeleft':
                if(touchType === 'swipeleft'){
                    binding.value()
                }
                break;
              case 'swiperight':
                if(touchType === 'swiperight'){
                    binding.value()
                }
                break;
              default:
            }
      		}, false);
        }
    	}
    }

     

  2. 在标签绑定指令和事件,并在methods定义事件。
    <div v-touch:swipeleft="leftSlide" v-touch:swiperight="rightSlide">
     
    </div>
    leftSlide() {
    	console.log('左滑')
    },
    rightSlide() {
    	console.log('右滑')
    }

     

 

转载于:https://my.oschina.net/u/4051564/blog/3024527

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐