uni app 實現列表左滑刪除按鈕

2021-10-25 18:33:38 字數 1691 閱讀 2387

首先了解一下實現功能的幾個重要事件：

1、touchstart事件：當手指觸控螢幕時候觸發，即使已經有乙個手指放在螢幕上也會觸發。

2、touchmove事件：當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間，呼叫preventdefault()事件可以阻止滾動。

3、touchend事件：當手指從螢幕上離開的時候觸發。

4、touchcancel事件：當系統停止跟蹤觸控的時候觸發。

接下來實現功能：

一、初始化資料

data


}
二、檢視層

:data-index


="index"


class


="order-item"


@touchstart


="drawstart"


@touchmove


="drawmove"


@touchend


="drawend"


:style


="'right:'+item.right+'px'


">


class


="content"


>


列表展示內容view


>


class


="remove"


@click


="deldata(item)"


>


注 銷view


>


view


>
三、css樣式(此處僅僅是左滑功能用到的樣式，列表其他樣式請根據自己的系統風格自行調整)

>


.order-item


.remove


style


>
四、js事件實現方法

//開始觸控滑動


drawstart


(e),


//觸控滑動


drawmove


(e)var touch = e.touches[0]


;var item =


this


.cslistarrl[e.currenttarget.dataset.index]


;var disx =


this


.startx - touch.clientx;


if(disx >=20)


this


.$set


(this


.cslistarrl[e.currenttarget.dataset.index]


,'right'


,disx);}


else},


//觸控滑動結束


drawend


(e)else},


//刪除方法


deldata


(item)


else


if(res.cancel)}}


);}
五、效果圖

IOS UITableView實現左滑刪除

tableview有乙個很好用的左滑功能，一般ios的使用者習慣就是左滑刪除，當然，還可以自定義上面的文字。下面就來說一說左滑刪除的實現，要呼叫兩個tableview的 方法。uitableviewcelleditingstyle tableview uitableview tableview ed...

ios實現UITableView左滑刪除 複製即用

開發專案時候需要用到tableview左滑刪除，就研究了一下，話不多說直接上 設cell可編輯 bool tableview uitableview tableview caneditrowatindexpath nsindexpath indexpath 設定刪除按鈕 uitableviewcel...

微信實現左滑刪除

wxml delete list for wx key bindtouchstart touchstart bindtouchmove touchmove class list box bindtouchend touchend data index data info list content s...