資訊專欄INFORMATION COLUMN
摘要：今天就遇到一個需要，刪除操作，按照微信的交互做一個。剩下的可以看看這個代碼，微信小程序側滑刪除編輯一些小問題在滑動的時候，貌似最小需要像素才會響應，是不是我的姿勢有點問題。原文閱讀寫一個微信小程序側滑刪除組件
背景
最近一直在斷斷續續做一個小程序的項目，看起來很小，但一直沒正經做過小程序，所有沒啥積累，什么東西都要自己寫一遍。
今天就遇到一個需要，刪除操作，按照微信的交互做一個。
向左滑動，顯示刪除按鈕，并且，是動畫、過渡的打開，左滑一丟丟并不會打開，大概 10 像素的時候才出發打開。左右滑動的時候，展開的程度和手指滑動貼合。最后手指滑動的方向決定打開還是關閉，并非起點與終點的方向。
思路既然要貼合手指的滑動，必然與 touchstart、touchmove、touchend 有關系。
移動的效果，CSS 3 中的 2D 轉換 transform: translateX(0px) 蠻合適的，只需要一個值就可以了。
首先，在 touchstart 標記起點，在 touchmove 的時候不斷計算當前元素應該在哪個位置，touchend 時把狀態歸位、判定結果。
在 touchmove 中不斷元素計算當前位置，手指起點、手指當前點可以計算出當前移動的距離，再與元素的起點結合，可以得到當前元素的位置。但元素的位置時刻都是變化的，需要一個當前元素點的副本。元素的位置也會在一個范圍內移動，不能超過了范圍。
在 touchend 中更新元素副本的數據，為下次滑動做準備。
最后手指滑動的方向是比較細膩的判定，需要結束滑動那一刻的狀態，于是，每次滑動的時候，記錄一組滑動的數組，取最后兩位的值做判定。
刪除
{
data: {
transitionTime: 0, // 過渡時間
translateX: 0, // 當前元素位置
__currentX:0, // 內部使用，當前元素位置的副本
__lastXs: [], // 內部使用，記錄上一個x
__startX: 0, // 內部使用，開始的X
}
}
基本的雛形已經有了。
touchstart 中，標記起點 X，并且初始化 __lastXs，并添加第一個移動坐標。
touchmove 里面不斷向 __lastXs 添加值，通過起點的 X 和當前的 X 更新元素的位置，并且做臨界值的判斷。手指滑動的時候，跟隨狀態，所以并不需要過渡。
touchend 里面做最有的判定，例如方向、最后的元素位置、過渡時間等。
按照以上方式做，sideslip-content 這邊的交互已經完成了，接下來結合一些計算方式，把按鈕昨晚就好了。
剩下的可以看看這個代碼，微信小程序 側滑刪除、編輯
一些小問題在滑動的時候，貌似最小需要 16 像素才會響應，是不是我的姿勢有點問題。
原文閱讀：寫一個微信小程序側滑刪除組件
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95421.html
摘要：微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序 微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發文檔 小程序設計指南 工具 小程序開發者...
摘要：微信小程序之跳轉在進入商品詳情頁以后，點擊左下角的圖標原應該跳轉到首頁，但是一直點也不跳，而且也不報錯。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業務需求來。 前言 隨著wepy和mpvue的出現及流行，開發小程序變的越來越便捷和強大，作為基佬社區的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...
閱讀 3106·2021-11-18 10:02
閱讀 2618·2021-10-13 09:47
閱讀 3034·2021-09-22 15:07
閱讀 791·2019-08-30 15:43
閱讀 1810·2019-08-30 10:59
閱讀 1685·2019-08-29 15:34
閱讀 1702·2019-08-29 15:06
閱讀 439·2019-08-29 13:28
