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;
}

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

查看更多关于vue3实现移动端滑动模块的详细内容...