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