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