vue3實現(xiàn)移動端滑動模塊

更新時間：2022年09月14日 15:26:50 作者：如光不息丶

這篇文章主要為大家詳細介紹了vue3實現(xiàn)移動端滑動模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue3實現(xiàn)移動端滑動模塊的具體代碼，供大家參考，具體內(nèi)容如下

需要實現(xiàn)的需求如下

直接上代碼

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

? ? ? //通過正切函數(shù)
? ? ? 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){
? ? ? ? // 通過正切函數(shù)判斷滑塊該在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'

? ? ? //恢復(fù)瀏覽器滑動默認行為
? ? ? 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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: