vue3实现移动端滑动模块

本文实例为大家分享了vue3实现移动端滑动模块的具体代码，供大家参考，具体内容如下

需要实现的需求如下

直接上代码

HTML:

<div class="container" id="container">
  <div class="controlDiv" id="controlDiv">
    <div 
      class="centerCircle" 
      id="centerCircle" 
      @touchstart="start" 
      @touchmove="move" 
      @touchend="end">
    </div>
  </div>
</div>

javascript:

import {defineComponent, onMounted} from "vue";
export default defineComponent({
  setup(prop,content) {
    let controlDiv ='' //控制器容器元素
    let circleDiv = '' //中心圆元素
    //最大宽高
    let maxW = 0
    let maxH = 0
    //初始触摸点
    let oL = 0
    let oT = 0
    //相对屏幕的初始触摸点
    let touchClientX = 0 
    let touchClientY = 0

    onMounted(() => {
      controlDiv = document.querySelector('#controlDiv') //控制器容器元素
      circleDiv = document.querySelector('#centerCircle') //中心圆元素
      console.log(circleDiv.offsetWidth, circleDiv.offsetHeight)

      //限制最大宽高，不让滑块出去
      maxW = controlDiv.offsetWidth
      maxH = controlDiv.offsetHeight
    })

    //手指触摸开始，记录div的初始位置
    const start = (e) => {
      var ev = e || window.event;
      var touch = ev.targetTouches[0];
      //初始位置
      oL = touch.clientX - circleDiv.offsetLeft
      oT = touch.clientY - circleDiv.offsetTop

      touchClientX = touch.clientX
      touchClientY = touch.clientY

      console.log(oL, oT)
      //阻止浏览器滑动默认行为
      document.addEventListener('touchmove', defaultEvent, { passive: false })
    }

    //手指滑动并改变滑块位置
    const move = (e) => {
      var ev = e || window.event
      var touch = ev.targetTouches[0]
      var oLeft = touch.clientX - oL
      var oTop = touch.clientY - oT

      //判断是否超出边界
      if(oLeft - 30 < 0) {
          oLeft = 30
      } else if(oLeft + 30 >= maxW) {
          oLeft = maxW-30
      }
      if(oTop - 30 < 0) {
          oTop = 30
      } else if(oTop + 30 >= maxH) {
          oTop = maxH-30
      }

      //通过正切函数
      let tan = (150 - oTop)/(oLeft - 150)
      // console.log(tan)

      // circleDiv.style.transition = '.1s all' //动画效果（体验不佳，不建议使用）

      //判断中心位置上下左右20px范围可随意滑动
      if(Math.abs(oLeft - 150) >= 20 || Math.abs(150 - oTop)>= 20){
        // 通过正切函数判断滑块该在X轴上移动或是y轴上移动
        if((tan <= -1) || (tan >= 1)){ //y轴
          circleDiv.style.top =  oTop + 'px'
          circleDiv.style.left =  150 + 'px'
        }else if((tan > -1) || (tan < 1)){ //x轴
          circleDiv.style.top = 150 + 'px'
          circleDiv.style.left = oLeft + 'px'
        }
      }else{
        circleDiv.style.top =  oTop + 'px'
        circleDiv.style.left = oLeft + 'px'
      }
    }

    //手指抬起
    const end = (e) => {
      //回弹初始点
      circleDiv.style.left = (touchClientX -  oL) + 'px'
      circleDiv.style.top = (touchClientY - oT) + 'px'

      //恢复浏览器滑动默认行为
      document.removeEventListener("touchmove", defaultEvent, { passive: true })
    }

    //阻止默认事件
    function defaultEvent(e) {
      e.preventDefault();
    }

    return { start, move, end }
  }
});

CSS:

.controlDiv{
  position: relative;
  width: 300px;
  height: 300px;
  background: #ebebeb;
  margin: 200px auto;
  border-radius: 50%;
 }
.centerCircle{
  width: 65px;
  height: 65px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:0px 0px 30px #a7a7a7;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。