android 高仿ios左滑动删除item,H5仿手Q左滑删除功能组件

背景

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

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

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

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

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

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

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

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

否

是

实现

dom与css

/* html结构 */

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

  删除

/* 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;

}

得到如下图的列表

js

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

最终效果：

组件源码

后话：

同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。

恩，会进行迭代的(°ˊдˋ°)°°