H5仿手Q左滑删除功用组件

背景

前不久碰到一个需求，h5列表页完成左滑删除功用。

起首对下文有关滑块的指代标识做出一致划定

体验了一动手Q原生滑动功用，在此之前关于滑块的详细动效提出了几个问题。（愿望人人也去视察体验一下，网上许多现成的代码都存在结果上的差别）

1. 掌握单条li滑动照样掌握li中内容块滑动

2. 是不是许可多条内容块同时睁开

3. 当列表高低滑动时，内容块是不是须要收起

在视察原生滑动功用后，对上述问题做出以下解答

1. 掌握li中内容块滑动，经由过程设置层级关联使得初始状况时按钮租处于内容块之下

2. 否

3. 是

完成

dom与css

/* html构造 */


• 
  
  
  第11金!马龙4-0张继科乒球男单夺冠造诣大满贯伟业
  
  
  
  
  删除
  
  
  

获得以下图的列表

js

等我有空再细说好了 =-=人人去看源码吧。

终究结果：

组件源码

https://github.com/yvonnevv/S&＃8230;

后话：
同事反应没有给滑动最先或完成时暴露一个自定义事宜的接口。。
恩，会举行迭代的（°ˊдˋ°）°°