沃梦达 / IT编程 / 前端开发 / 正文

使用Vue实现移动端左滑删除效果附源码

前端开发
2023-12-25

针对“使用Vue实现移动端左滑删除效果附源码”，我可以提供以下完整攻略。

针对“使用Vue实现移动端左滑删除效果附源码”，我可以提供以下完整攻略。

前置知识

实现该功能需要具备以下基础知识：

  • Vue.js基本语法
  • 移动端touch事件基本知识
  • CSS3动画基本知识

实现步骤

第一步：实现左滑效果

首先，我们需要实现左滑效果。我们可以使用CSS3的transition或animation属性实现。

以使用transition为例，我们可以在CSS中添加以下代码：

.item {
    transition: transform .2s ease;
}

这个样式定义了元素在transform属性发生改变时，会以0.2秒的时间，以“ease”的方式过渡到新的状态。

接着，我们需要实现左滑功能。具体来说，就是监听元素的touch事件，当用户向左滑动足够的距离后，将元素的位置向左移动。

以使用Vue.js为例，我们可以在组件中添加以下代码：

<template>
  <div class="item" :style="{ transform: `translateX(${translation}px)` }" 
    @touchstart="handleTouchStart" @touchmove="handleTouchMove"
    @touchend="handleTouchEnd">
    <!-- 元素内容 -->
  </div>
</template>

我们需要将translation变量与元素的transform属性绑定在一起，实现位移的效果。

同时，我们添加了三个touch事件的监听函数，分别用于处理触摸开始、触摸移动和触摸结束的情况。

export default {
  data() {
    return {
      touchStartX: 0,
      touchMoveX: 0,
      translation: 0,
      isTouching: false
    }
  },
  methods: {
    handleTouchStart(event) {
      this.touchStartX = event.touches[0].clientX
      this.isTouching = true
    },
    handleTouchMove(event) {
      if (!this.isTouching) {
        return
      }
      this.touchMoveX = event.touches[0].clientX
      const delta = this.touchMoveX - this.touchStartX
      if (delta > 0) {
        this.translation = delta;
      }
    },
    handleTouchEnd(event) {
      if (!this.isTouching) {
        return
      }
      this.isTouching = false
      // 滑动距离超过50px，则触发删除操作
      if (this.translation >= 50) {
        this.deleteItem()
      } else {
        this.translation = 0;
      }
    },
    deleteItem() {
      // 触发删除操作
    }
  }
}

这里我们定义了四个变量：touchStartX、touchMoveX、translation和isTouching。

在handleTouchStart函数中，我们记录了第一根手指的横向位置和当前状态。

在handleTouchMove函数中，我们记录了移动手指时的横向位置，并根据手指的横向差值将元素左移。

在handleTouchEnd函数中，我们判断是否触发删除操作。若滑动距离超过50px，则认为用户触发了删除操作，调用deleteItem函数删除元素；否则将元素移回初始位置。

第二步：添加动画效果

我们可以在左滑的基础上，进一步添加动画效果，让删除操作更加流畅。

具体来说，我们可以在handleTouchEnd中将位移过程改为动画：

handleTouchEnd(event) {
  if (!this.isTouching) {
    return
  }
  this.isTouching = false
  // 滑动距离超过50px，则触发删除操作
  if (this.translation >= 50) {
    this.$refs.item.style.transition = "transform .2s ease-in-out"
    this.translation = -this.$refs.item.offsetWidth
    setTimeout(() => {
      this.deleteItem()
    }, 200)
  } else {
    this.$refs.item.style.transition = "transform .15s ease-in-out"
    this.translation = 0
  }
}

在触摸结束时，如果滑动距离超过50px，我们将元素移至屏幕左侧，同时通过setTimeout函数延迟200ms调用deleteItem函数删除元素（以确保用户看到删除动画的过程）。否则，将元素移回初始位置。

第三步：完整示例1

以下是一份完整的Vue.js组件代码，演示如何实现左滑删除效果。

<template>
  <div class="item" :style="{ transform: `translateX(${translation}px)` }" ref="item"
    @touchstart="handleTouchStart" @touchmove="handleTouchMove"
    @touchend="handleTouchEnd">
    <div class="content">
      <!-- 元素内容 -->
      <div class="delete-btn" @click="deleteItem">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      touchStartX: 0,
      touchMoveX: 0,
      translation: 0,
      isTouching: false
    }
  },
  methods: {
    handleTouchStart(event) {
      this.touchStartX = event.touches[0].clientX
      this.isTouching = true
    },
    handleTouchMove(event) {
      if (!this.isTouching) {
        return
      }
      this.touchMoveX = event.touches[0].clientX
      const delta = this.touchMoveX - this.touchStartX
      if (delta > 0) {
        this.translation = delta;
      }
    },
    handleTouchEnd(event) {
      if (!this.isTouching) {
        return
      }
      this.isTouching = false
      // 滑动距离超过50px，则触发删除操作
      if (this.translation >= 50) {
        this.$refs.item.style.transition = "transform .2s ease-in-out"
        this.translation = -this.$refs.item.offsetWidth
        setTimeout(() => {
          this.deleteItem()
        }, 200)
      } else {
        this.$refs.item.style.transition = "transform .15s ease-in-out"
        this.translation = 0
      }
    },
    deleteItem() {
      // 触发删除操作
    }
  }
}
</script>

<style scoped>
.item {
  overflow: hidden;
}

.content {
  position: relative;
  padding: 12px;
  background: #fff;
}

.delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  background: #f00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>

第四步：完整示例2

以下是另一份完整的Vue.js组件代码，演示如何实现左滑删除效果，包含了删除后回滚的效果。

<template>
  <div class="item" :style="{ transform: `translateX(${translation}px)` }" ref="item"
    @touchstart="handleTouchStart" @touchmove="handleTouchMove"
    @touchend="handleTouchEnd">
    <div class="content">
      <!-- 元素内容 -->
      <div class="delete-btn" @click="deleteItem">删除</div>
    </div>
    <div class="rollback-btn" :class="{ 'show': isRollbackVisible }" 
      @click="rollbackItem">撤销</div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      touchStartX: 0,
      touchMoveX: 0,
      translation: 0,
      isTouching: false,
      isRollbackVisible: false,
      isDeleted: false
    }
  },
  methods: {
    handleTouchStart(event) {
      this.touchStartX = event.touches[0].clientX
      this.isTouching = true
    },
    handleTouchMove(event) {
      if (!this.isTouching) {
        return
      }
      this.touchMoveX = event.touches[0].clientX
      const delta = this.touchMoveX - this.touchStartX
      if (delta > 0) {
        this.translation = delta;
      }
    },
    handleTouchEnd(event) {
      if (!this.isTouching) {
        return
      }
      this.isTouching = false
      // 滑动距离超过50px，则触发删除操作
      if (this.translation >= 50) {
        this.$refs.item.style.transition = "transform .2s ease-in-out"
        this.translation = -this.$refs.item.offsetWidth
        this.isDeleted = true
        setTimeout(() => {
          this.deleteItem()
        }, 200)
      } else {
        this.$refs.item.style.transition = "transform .15s ease-in-out"
        this.translation = 0
        if (this.isDeleted) {
          // 如果已经删除，则显示回滚按钮
          this.isRollbackVisible = true
        }
      }
    },
    deleteItem() {
      // 触发删除操作
    },
    rollbackItem() {
      this.translation = 0
      this.isDeleted = false
      this.isRollbackVisible = false
      // 触发回滚操作
    }
  }
}
</script>

<style scoped>
.item {
  overflow: hidden;
}

.content {
  position: relative;
  padding: 12px;
  background: #fff;
}

.delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  background: #f00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.rollback-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  background: #ff0;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity .15s ease-in-out;
}

.show {
  opacity: 1 !important;
}
</style>

结束语

通过以上步骤，我们就可以使用Vue.js实现移动端左滑删除效果了。值得注意的是，上述代码并非唯一正确的实现方案，大家可以根据实际需求，选择性地修改代码以达到不同的效果。

希望这份攻略能够对你有所帮助！

本文标题为：使用Vue实现移动端左滑删除效果附源码

上一篇： js实现中文转拼音的完整步骤记录
下一篇： 改变checkbox默认选中状态及取值的实现代码
猜你喜欢
最新文章
热门文章
基础教程
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2