vue3实现移动端滑动模块
更新时间:2022年09月14日 15:26:50 作者:如光不息丶
这篇文章主要为大家详细介绍了vue3实现移动端滑动模块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
vue+element开发使用el-select不能回显的处理方案
这篇文章主要介绍了vue+element开发使用el-select不能回显的处理方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
最新评论