vue3移动端滑动模块
如光不息丶 人气:0需要实现的需求如下
直接上代码
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; }
加载全部内容