小程式 — 實現左滑刪除效果①
從京東購物，印象筆記看小程式左滑互動的實現
，而我們就使用最新的方案，就是用 movable-view 來實現左滑刪除的效果。GitHub： https://github.com/Ewall1106/miniProgramDemo
首先上圖看下最終效果：
小程式實現左滑刪除效果
1、movable-area基本概念
大家仔細去看看 官網的文件 後再來看我寫的這篇文章可能會更好理解。
（1） movable-area 這個就是定義了一個移動的區域，跟普通的 <view></view> 的含義是一樣的，不同在於，接著往下看；
注意：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必須在<movable-area/>元件中，並且必須是直接子節點，否則不能移動。
- 有這麼一些屬性（沒截全）：
部分截圖來自於小程式官網
OK，這就是關於movable-area元件的一些基本概念的介紹，接下來我們實踐實踐。
2、頁面結構
（1）這是我們html基本頁面結構，我主要來解釋一下 movable-view 的屬性起到了一些什麼作用。
- 首先我們定義了
direction方向為horizontal(橫向)； - 然後
x就是偏移方向，這裡我們給個預設值為0； -
out-of-bounds定義當超過可移動區域後，還可以移動； -
damping為阻尼係數，設定為100就是讓它移動快點； - 最後綁定了一個在拖動過程中觸發的事件、觸控開始和結束事件。
基本html結構
（2）然後我們定義一下css樣式，這裡大家應該能看得懂，我就不多說了：
樣式
主要請仔細看看容器的 寬度 ，後面我們設定 movable-view 的 x屬性 的時候是根據樣式的寬度來處理的。
3、小結
這樣，我們的頁面基本結構就實現了，到這裡，我們還有這麼幾個問題需要解決完善：
- 事件的監聽，當超過最大滑動距離時，讓movable-view提供一個非常流暢的過界動畫和回彈效果；
- 設定閾值，往左移動超過閾值則顯示刪除按鈕，否則隱藏（一般為刪除按鈕寬的40%）；
我們下章再講。