jQuery實作左滑出現刪除按鈕方法

本文主要介紹了基於jQuery的左滑出現刪除按鈕的範例，這裡整理了詳細的程式碼,非常具有實用價值，需要的朋友可以參考下，希望能幫助到大家。

最近在做專案的時候遇到了個需求，在網頁上實現類似於QQ會話清單那樣子的左滑出現刪除按鈕的效果，於是嘗試著寫了一個，寫出來與大家交流分享，大神勿噴。

基本需求

由於我們是在做一個跨平台的APP，裡面部分介面其實就是WebView載入的網頁，因此需要使用網頁實現這樣的效果：往左滑動時，顯示刪除按鈕，再往右滑，隱藏刪除按鈕。

成品範例圖

額，先上圖。下面分別是在PC瀏覽器裡和在Mobile瀏覽器裡的效果。

PC瀏覽器

手機瀏覽器

##實現想法

為了說明我的實作思路，做了兩個圖來輔助說明。

首先，請看圖1。在圖中，我們設定每一行的寬度超過瀏覽器的寬度，而其超出的部分就是放置按鈕的區域。由於超出了瀏覽器的最大寬度，因此按鈕區域此時是不可見的，只能顯示左側的常規資訊部分。

圖1 普通狀態

接下來，我們監聽左側常規資訊區域，監聽滑動事件（具體如何監聽先不考慮）。當我們監聽到左滑事件時，我們讓對應行左偏移，讓按鈕顯示出來，同時左側超出的部分被遮擋（請看圖2）。

圖2 左滑狀態

當我們右滑時，我們再讓對應行回復到左偏移為0的時候就行了。

關鍵實現方式

對於左滑和右滑，我們透過設定常規訊息區域的marin-left來實現，當設定margin-left為負值時，實現左滑，當再次設定margin-left為0時，實現右滑。

對於滑動事件監聽，透過監聽滑鼠（手指）按下和抬起來實現，根據兩點的X座標的差值的正負判定是右滑還是左滑。

完整程式碼

要注意的是，我在測試的時候用的是chrome的普通模式和mobile模擬器模式，發現兩種模式下監聽是不一樣的，因此我寫了兩種監聽，這樣至少有一種會執行。也許有其他更好的適配方法，但不作為此處的重點。當然也歡迎大家賜教。

至於程式碼部分，用了jQuery，其實不用也沒啥問題的，動畫滑動和監聽都可以用純js寫，但是由於這不是這裡的重點，那麼為什麼不用jQuery呢？成功者站在巨人的肩膀上，而且咱也沒有jQuery寫的好(。・`ω´・)

2015/11/13更新

#有位同學提出說代碼在QQ手機瀏覽器和Opera手機瀏覽器等中沒有滑動效果，找了一下大概是帖子裡說的原因，於是根據帖子裡的提示以及那位同學的一個大神同學的提示，做了一下修改。主要是在touchmove事件中根據橫縱座標位移來判斷是否阻止預設事件，如下：

#

2016/02/25更新

qq_25558115同學提到：「如果再能提供給大家只能有一筆記錄可以左滑， 倘若滑動其他的記錄，則有左滑記錄的要回到原位」。於是進行了簡單實作。主要想法如下：

2016/09/06更新

根據馬燦髮同學提出的bug進行修改：

右滑時進行判斷，僅當要右滑的物件（pressedObj）是上一次左滑的物件（lastLeftObj）時才將物件右滑並清空lastLeftObj。

根據girlyougo同學的提議，加入「在本行以外的其他區域點擊時均重設目前左滑按鈕」的功能。思路為在滑動結束時，判定pressedObj!=lastLeftObj，即可知點擊/滑動的物件為其他物件：

實際上，在新增了上述功能之後，前面提到的bug不存在了。不過此處保留了消除bug的部分程式碼。

更新後的完整程式碼如下：

##

程式碼還比較粗糙，存在著很多bug，也有些地方不是那麼絕對。例如當我按下時是在第一筆記錄，然後抬起時是在第二筆記錄，那麼這時候滑動將是第一筆記錄。但是這個看具體需求了，如果你覺得滑動的對象應該以按下去時的對象為準的話，那就不管在哪抬起都滑動那個按下時的對象；如果你覺得滑動的對象應該是抬起時的對象，那也沒問題，或是你覺得按下和抬起時不是同一個對象就不滑動任何對像那也行。總之，看需求。

相關推薦：

基於JS實作行動端向左滑動出現刪除按鈕功能

實例詳解Angular實作點選按鈕後在上方顯示輸入內容

微信小程式實作點選按鈕修改字體顏色功能

#

以上是jQuery實作左滑出現刪除按鈕方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！