H5仿手Q左滑刪除功能組件

laznrbfe 發布于2019-08-29 11:09 / 804人閱讀

摘要：背景前不久遇到一個需求，列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定體驗了一下手原生滑動功能，在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。

背景

前不久遇到一個需求，h5列表頁實現左滑刪除功能。

首先對下文有關滑塊的指代標識做出統一規定

體驗了一下手Q原生滑動功能，在此之前對于滑塊的具體動效提出了幾個問題。（希望大家也去觀察體驗一下，網上很多現成的代碼都存在效果上的差異）

控制單條li滑動還是控制li中內容塊滑動

是否允許多條內容塊同時展開

當列表上下滑動時，內容塊是否需要收起

在觀察原生滑動功能后，對上述問題做出如下解答

控制li中內容塊滑動，通過設置層級關系使得初始狀態時按鈕租處于內容塊之下

否

是

實現 dom與css

/* html結構 */

    
      
        第11金!馬龍4-0張繼科乒球男單奪冠成就大滿貫偉業
      
      
        刪除
      
    


/* style 此處省略部分樣式 */

得到如下圖的列表

等我有空再細說好了 =-=大家去看源碼吧。

最終效果：

組件源碼

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

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

云服務器 GPU云服務器左滑刪除 h5掃碼功能 datav怎么刪除組件刪除功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111454.html

H5仿手Q左滑刪除功能組件

摘要：背景前不久遇到一個需求，列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定體驗了一下手原生滑動功能，在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。背景前不久遇到一個需求，h5列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定 showImg(https://segmentfa...

mayaohua 2019-08-21 14:19 評論0 收藏0
H5仿手Q左滑刪除功能組件

摘要：背景前不久遇到一個需求，列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定體驗了一下手原生滑動功能，在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。背景前不久遇到一個需求，h5列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定 showImg(https://segmentfa...

wujl596 2019-08-01 15:36 評論0 收藏0
前端實現列表左滑刪除（react）

摘要：而列表項要包括內容和刪除按鈕，內容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過的。來判斷當前是左滑還是右滑，左滑時在減小，而右滑時變大。并且記錄下當前滑動的是第幾項。最近做了一個類似系統操作的左滑刪除的demo，用的taro框架，和大家分享一下~首先需要考慮的有以下幾點：1）布局；2）判斷是左滑還是右滑，左滑時出現刪除，右滑時回歸原位；3）排他性，意思是某一個時間只...

everfight 2019-08-02 15:27 評論0 收藏0