小程式的左滑刪除功能的實現

2021-09-18 06:11:12 字數 545 閱讀 2266

我們先來看html部分**:

先要建立刪除的按鈕,設定好樣式,然後大框設定樣式把他隱藏起來overflow:hidden

下面是刪除的css**:

.deleteclass
監控手指開始觸控的地方,和移動的距離,還有最後結束時的位置,接下來就是判斷了

以下是js部分:

touchs: function (e) 

this.setdata()

},touchm: function (e)

item.right = disx

this.setdata()

} else )}},

touche: function (e) )

} else )

}},

3.然後再data上面設定個資料:delbtnwidth:90,//你的刪除模組的寬

4.記得設定data-index=『}』判斷是你列表的哪個

5.差不多也就這樣了qaq

小程式左滑刪除

儲存之 wxml 刪除哈哈 wxss touch item content del touch move active content,touch move active del jspage onload function this.setdata 手指觸控動作開始 記錄起點x座標 touchst...

小程式實現左滑刪除效果

小程式的左滑刪除效果用的是元件 movable area 和 movable view 文件 1 movable area這個就是定義了乙個移動的區域,跟普通的的含義是一樣的,不同在於,接著往下看 注意 movable area 必須設定width和height屬性,不設定預設為10px 2 mov...

小程式左滑刪除之實現

之前在做專案的過程中有這麼乙個需求,列表左滑刪除,這裡我使用的小程式的 官方位址 實現的,最終研究了一番,實現了產品需求。效果圖如下 實現思路 1 最外層標籤使用movable area標籤,寬高必須固定 2 子標籤必須使用movable view,寬高和父元素movable area一樣,不是子標...