Vue3實現(xiàn)一個可左右滑動操作組件的示例代碼

更新時間：2022年11月19日 10:20:40 作者：簡單卟容易

這篇文章主要為大家詳細介紹了如何利用Vue3實現(xiàn)一個可左右滑動操作組件，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，感興趣的可以學一下

代碼實現(xiàn)

監(jiān)聽touchstart，記錄開始位置。

監(jiān)聽touchmove，記錄移動的位置，計算移動的方向，再把值設置給translateX（計算結果的值要能夠跟隨手指移動），加入鎖定方向，是為禁止斜方向滑動。

監(jiān)聽touchend，在這里判斷是否觸發(fā)change事件。

<script setup>
import { ref } from "vue";

const props = defineProps({
  leftDisabled: {
    type: Boolean,
    default: false
  },
  rightDisabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["change"]);

// 縱向滑動時禁止水平滑動，水平滑動時禁止縱向滑動；
// 水平滑動結束超過屏幕二分之一時則toggle；
// 最大可滑動不超過屏幕的三分之二；
const startX = ref(0);
const startY = ref(0);
const endX = ref(0);
const endY = ref(0);
const dValueX = ref(0);
const dValueY = ref(0);
const translateX = ref(0);
const horizontalMoved = ref(false);
const verticalMoved = ref(false);

const onTouchStart = (e) => {
  startX.value = e.targetTouches[0].pageX;
  startY.value = e.targetTouches[0].pageY;
};

const onTouchMove = (e) => {
  endX.value = e.targetTouches[0].pageX;
  endY.value = e.targetTouches[0].pageY;
  dValueX.value = Math.abs(startX.value - endX.value);
  dValueY.value = Math.abs(startY.value - endY.value);
  const stopRange = window.screen.width - window.screen.width / 3;
  // 水平滑動長度大于縱向滑動長度，選擇水平滑動
  if (dValueX.value > dValueY.value) {
    if (verticalMoved.value) {
      e.preventDefault();
      return;
    } else horizontalMoved.value = true;

    if (dValueX.value < stopRange) {
      if (startX.value > endX.value) {
        if (!props.leftDisabled) translateX.value = dValueX.value * -1; // 向左劃
      } else {
        if (!props.rightDisabled) translateX.value = dValueX.value;
      }
    }

    e.preventDefault();
  } else {
    if (horizontalMoved.value) e.preventDefault();
    else verticalMoved.value = true;
  }
};

const onTouchEnd = (e) => {
  const range = window.screen.width / 2;
  if (horizontalMoved.value) {
    if (dValueX.value > range) {
      if (startX.value > endX.value) {
        // console.log("向左劃");
        if (!props.leftDisabled) handleChange("left");
      } else if (startX.value < endX.value) {
        // console.log("向右劃");
        if (!props.rightDisabled) handleChange("right");
      }
    }
  }
  horizontalMoved.value = false;
  verticalMoved.value = false;
  translateX.value = 0;
  startX.value = endX.value = 0;
  startY.value = endY.value = 0;
};

const handleChange = (value) => emit("change", value);
</script>

<template>
  <div
    :style="`transition-duration: 200ms; transform: translateX(${translateX}px)`"
  >
    <slot
      :touchstart="onTouchStart"
      :touchmove="onTouchMove"
      :touchend="onTouchEnd"
    ></slot>
  </div>
</template>

如何使用

<swipe-container @change="onToggleChange">
  <template #default="{ touchstart, touchmove, touchend }">
    <div
      class="list"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
    >
      <div
        v-for="item in list"
        class="card"
      ></div>
    </div>
  </template>
</swipe-container>

到此這篇關于Vue3實現(xiàn)一個可左右滑動操作組件的示例代碼的文章就介紹到這了,更多相關Vue左右滑動操作內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: