小程式實現左滑刪除效果

2022-06-07 06:48:08 字數 1409 閱讀 7235

小程式的左滑刪除效果用的是元件 movable-area 和 movable-view  

文件 : 

(1)movable-area這個就是定義了乙個移動的區域,跟普通的的含義是一樣的,不同在於,接著往下看;

注意:movable-area 必須設定width和height屬性,不設定預設為10px

(2)movable-view這個就是乙個可移動的檢視容器,可以在頁面中拖拽滑動。

movable-view 必須設定width和height屬性,不設定預設為10px

movable-view 預設為絕對定位,top和left屬性為0px

當movable-view小於movable-area時,movable-view的移動範圍是在movable-area內;當movable-view大於movable-area時,movable-view的移動範圍必須包含movable-area(x軸方向和y軸方向分開考慮)

movable-view 還有很多屬性,這裡就不介紹了.

test.wxml

<

view

class

="page"

>

<

movable-area

class

="m_a"

>

<

movable-view

class

="data_list"

direction

="horizontal"

inertia

="true"

out-of-bounds

="true"

>

<

view

class

="d_box"

>

<

view

class

="data"

>內容內容內容內容內容內容內容

view

>

<

view

>刪除

微信小程式 左滑刪除效果

1 wxml touch item元素繫結了bindtouchstart bindtouchmove事件 class container class touch item data index bindtouchstart touchstart bindtouchmove touchmove wx ...

小程式左滑刪除

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

小程式左滑刪除之實現

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