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 cli+mui 区域滚动的实例代码

    Vue cli+mui 区域滚动的实例代码

    下面小编就为大家分享一篇Vue cli+mui 区域滚动的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 总结vue映射的方法与混入的使用过程

    总结vue映射的方法与混入的使用过程

    这篇文章主要介绍了总结vue映射的方法与混入的使用过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解vue2.0模拟后台json数据

    详解vue2.0模拟后台json数据

    这篇文章主要介绍了vue2.0模拟后台json数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue+element开发使用el-select不能回显的处理方案

    vue+element开发使用el-select不能回显的处理方案

    这篇文章主要介绍了vue+element开发使用el-select不能回显的处理方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue?注释template中组件的属性说明

    vue?注释template中组件的属性说明

    这篇文章主要介绍了vue?注释template中组件的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.Draggable拖拽功能的配置使用方法

    Vue.Draggable拖拽功能的配置使用方法

    这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Vue插件写、用详解(附demo)

    Vue插件写、用详解(附demo)

    本篇文章主要介绍了Vue插件写、用详解(附demo),插件就是指对Vue的功能的增强或补充。有兴趣的可以了解一下。
    2017-03-03
  • 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    这篇文章主要介绍了解决微信浏览器缓存站点入口文件(IIS部署Vue项目),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue组件传值过程中丢失数据的分析与解决方案

    Vue组件传值过程中丢失数据的分析与解决方案

    这篇文章主要给大家介绍了关于Vue组件传值过程中丢失数据的分析与解决方案,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue3中hooks的概述及用法小结

    vue3中hooks的概述及用法小结

    这篇文章是介绍一下vue3中的hooks以及它的用法,主要围绕两点来介绍,一个是hooks基本概念,另一个是vue3中hooks的使用方法,本文结合实例代码给大家讲解的非常详细,需要的朋友参考下吧
    2023-03-03

最新评论

?


http://www.vxiaotou.com