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

背景

前不久遇到一个需求，h5列表页实现左滑删除功能。

首先对下文有关滑块的指代标识做出统一规定

体验了一下手Q原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。（希望大家也去观察体验一下，网上很多现成的代码都存在效果上的差异）

1. 控制单条li滑动还是控制li中内容块滑动

2. 是否允许多条内容块同时展开

3. 当列表上下滑动时，内容块是否需要收起

在观察原生滑动功能后，对上述问题做出如下解答

1. 控制li中内容块滑动，通过设置层级关系使得初始状态时按钮租处于内容块之下

2. 否

3. 是

实现

dom与css

/* html结构 */
<ul>
    <li class="sl-li">
      <div class="sl-content">
        第11金!马龙4-0张继科乒球男单夺冠成就大满贯伟业
      </div>
      <div class="sl-opts">
        <span>删除</span>
      </div>
    </li>
</ul>

/* style 此处省略部分样式 */
<style>
    .sl-li {
      height: 100%;
      position: relative;
    }
    .sl-li .sl-content {
      height: 100%;
      position: relative;
      z-index: 10;
      background-color: #fff;
    }
    .sl-li .sl-opts {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      z-index: 0;
      background-color: #F95F61;
      color: #fff;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
    }
</style>

得到如下图的列表

js

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

最终效果：

组件源码

https://github.com/yvonnevv/S...

后话：
同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。
恩，会进行迭代的（°ˊдˋ°）°°