Vue 仿QQ左滑删除组件功能

在这里插入图片描述
实现思路

具体实现思路如下:

1.布局方面我采用的是 rem + flex 布局,具体如何结构和样式可以参考我的代码,值得注意的是后面的删除按钮是我通过定位放在了每一行的最后,超出隐藏了而已
2.左滑和右滑是通过 touchstart 和 touchend 事件,通过判断滑动开始和结束,水平方向 x 的偏移量,如果大于一定得阈值认为是左滑动,小于一定的阈值则认为是右滑动
3.左滑动和右滑动分别都是通过父级 li 元素的 translate 偏移量进行变化的,这里我的实现方式是提前声明好样式,通过改变当前父级 li 的 type 值,进行样式切换
4.点击某一个滑块的时候,首先判断当前所有的滑块是否有处于 滑出状态的 ,如果有,则必须先将所有的滑块状态还原,如果没有,则点击生效,我这里只是弹出一个 alter ,具体业务可以根据实际填写
5.删除相对简单,当滑块画出后,出现删除按钮,点击按钮,拿到当前的数组索引值,通过数组的 splice 方法,删除对应的数组值即可

Html代码
在这里插入图片描述

js
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43905909/article/details/85272844