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...

後話：同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。恩，會進行迭代的（°ˊдˋ°）°°