html中删除按钮_移动端左滑出现删除按钮

目录：我们在日常开发过程中都应该会遇到这样的需求； “产品框向左滑动后出现删除按钮”；我首先在vant的组件中发现了这个；但是公司的一些要求在布局上感觉不太好；后来看了那些大佬写的文章，感觉没那么难了；如果我今天在这里写一个简单的圆顶，做一个记录；让大家互相学习；如果表达错误；希望各位老板多多指教；

首先我们来一张渲染图

我不会详细介绍此操作的步骤；只需转到代码即可；稍后我会一一谈谈想法。

  
  
  
  
  


  

    

      
左滑删除效果
      
删除
    
  

第一：我们先来思考第一个问题；我们需要隐藏删除按钮框；那么当我们滑动的时候，如果面前出现了删除按钮框，我们该怎么办呢？

这个时候我们就得这样想；我们需要显示删除按钮；那么它的兄弟元素将不可避免地隐藏它的一部分；所以我们需要移动的一定是删除按钮的父级；既然我们要移动的是()，那么()就必须比它的(盒子)宽；所以 ** ： ; ** 需要出现在盒子上；隐藏多余的部分；然后根据定位移动距离（左）；就达到了滑动的效果

第二：基本样式完成后，我们现在考虑的是如何让它滑动。

这里先给大家讲一下移动端的两个事件。

ontouchmove  // 手指在屏幕上移动时触发；
ontouchstart // 手指按下时触发；

当我们知道这两个事件之后，就很简单了；大家都是这样想的；当我们的手指触摸屏幕时，它的位置是什么？那么我们在这个过程中能走多远呢？

例如：您希望当用户移动40距离时出现删除按钮；当我们点击时，x轴位置是100；然后手指在移动过程中到达60的位置；那么这时候你让 向左移动40就可以了，就会出现删除按钮；如果想要有动画效果，就做一个转场即可；其实原理就是这么简单

第三：如果我有多个产品盒怎么办？

如果您有多个盒子；只需使用一个循环；记住不要使用 var 声明；如果使用var，会出现闭包问题；只需使用let；如果你真的想使用 var；您可以按照修改以下代码；这是创建效果的原始代码：即在事件外部添加立即执行函数。

for(let i=0;i