【自定义手机端触摸滑动的轮播效果】

最新推荐文章于 2024-10-04 23:29:38 发布

Min_Fox

最新推荐文章于 2024-10-04 23:29:38 发布

阅读量330

点赞数 5

分类专栏： js 文章标签：智能手机 vue.js 前端

本文链接：https://blog.csdn.net/min_fox/article/details/136819269

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript封装一个事件处理库，监听手机端的触摸方向，模拟swiper轮播的滑动效果，适用于Vue组件中。作者提供了全局定义方法和在组件中使用的示例。

摘要由CSDN通过智能技术生成

前言

自定义手机端的触摸效果，可以左右触摸滑动，就像swiper自带的轮播效果，在这种条件下可以随意实现你要的动画效果。

一、代码如下

把代码封装成一个方法，在需要的地方调用。

eventUtil.js

export const  EventUtil = {
  addHandler: function (element, type, handler) {
      if (element.addEventListener)
          element.addEventListener(type, handler, false);
      else if (element.attachEvent)
          element.attachEvent("on" + type, handler);
      else
          element["on" + type] = handler;
  },
  removeHandler: function (element, type, handler) {
      if(element.removeEventListener)
          element.removeEventListener(type, handler, false);
      else if(element.detachEvent)
          element.detachEvent("on" + type, handler);
      else
          element["on" + type] = handler;
  },
  /**
   * 监听触摸的方向
   * @param target            要绑定监听的目标元素
   * @param isPreventDefault  是否屏蔽掉触摸滑动的默认行为（例如页面的上下滚动，缩放等）
   * @param upCallback        向上滑动的监听回调（若不关心，可以不传，或传false）
   * @param rightCallback     向右滑动的监听回调（若不关心，可以不传，或传false）
   * @param downCallback      向下滑动的监听回调（若不关心，可以不传，或传false）
   * @param leftCallback      向左滑动的监听回调（若不关心，可以不传，或传false）
   */
  listenTouchDirection: function (target, isPreventDefault, upCallback, rightCallback, downCallback, leftCallback) {
      this.addHandler(target, "touchstart", handleTouchEvent);
      this.addHandler(target, "touchend", handleTouchEvent);
      this.addHandler(target, "touchmove", handleTouchEvent);
      var startX;
      var startY;
      function handleTouchEvent(event) {
          switch (event.type){
              case "touchstart":
                  startX = event.touches[0].pageX;
                  startY = event.touches[0].pageY;
                  break;
              case "touchend":
                  var spanX = event.changedTouches[0].pageX - startX;
                  var spanY = event.changedTouches[0].pageY - startY;
                  //认定为垂直方向滑动  
                    if(spanY > 0){         //向下
                        if(downCallback) downCallback();
                    } else if (spanY < 0) {//向上
                        if(upCallback) upCallback();
                    }
                    //认定为水平方向滑动
                    if(Math.abs(spanX) > Math.abs(spanY)) {      
                        if(spanX > 30){         //向右
                            if(rightCallback) rightCallback();
                        } else if(spanX < -30){ //向左
                            if(leftCallback) leftCallback();
                        }
                    }
                  break;
              case "touchmove":
                  //阻止默认行为
                  if(isPreventDefault)
                      event.preventDefault();
                  break;
          }
      }
  }
};

二、使用步骤

1.全局定义次方法

main.js

import Vue from 'vue'

import { EventUtil } from "./common/eventUtil.js";
Vue.prototype.$EventUtil = EventUtil;

2.在组件中使用

const Ele = Array.from(document.getElementsByClassName("swiper-slide"));
Ele.forEach(e => {
 this.$EventUtil.listenTouchDirection(e, false, false, () => {this.moreSetPrevClick();}, false, () => {this.moreSetNextClick();});
});