Vue3如何实现微信右滑删除功能的详细长尾词？

本文共计2085个文字，预计阅读时间需要9分钟。

目录一. 创建简单的页面二. 设置初始条件三. 设计touchstart函数四. 设计touchend函数五. 添加过度动画今日项目需求：实现一个类似微信右滑显示额外选项的功能，记录实现思路。

目录

• 一.搭建简易的页面
• 二.前置条件
• 三.设计touchstart函数
• 四.设计touchend函数
• 五.加上过度动画

今天项目需求需要实现一个类似于微信右滑显示额外选项的功能，记录一下实现思路。

一.搭建简易的页面

对应的代码，界面使用了tailwindCSS，代码非常简单，就是普通的定位，关键的定位已经用黄色框框圈出。right的值为div删除的宽度，其它的样式这里不再过多赘述。

二.前置条件

这里先来梳理一下思路。

首先，我们需要给这删除按钮组件打上ref，因为之后我们需要用到这个div的实例。(wrapper的ref是只是为了优化代码，我们暂时不需要)这里我们需要用到TouchEvent这个事件，我们在浏览器开发者工具测试时，需要调节自适应到手机的模式才可以看到效果。