資訊專欄INFORMATION COLUMN
摘要：移動端左滑刪除組件左滑刪除在移動端很常見。我們想要是當(dāng)滑塊沒有超過刪除按鈕的一半時自動回到起點位置?；瑒泳嚯x超過一半滑動到最大值刪除按鈕寬度盡量精簡代碼在開始之前，我們先得將弄清楚了。
Vue.js移動端左滑刪除組件
左滑刪除在移動端很常見。下面我們一起來封裝一下這個簡單的小組件。我們想要是：
當(dāng)滑塊沒有超過刪除按鈕的一半時自動回到起點位置。
滑動距離超過一半滑動到最大值（刪除按鈕寬度）
盡量精簡代碼
在開始之前，我們先得將 [touchEventApi][1]弄清楚了。這個小組件中，用到了：
1. TouchEvent.touches （表示一 個 TouchList 對象，包含了所有當(dāng)前接觸觸摸平面的觸點的Touch對象）
2. TouchEvent.changedTouches （一個 TouchList 對象，包含了代表所有從上一次觸摸事件到此次事件過程中，
狀態(tài)發(fā)生了改變的觸點的 Touch 對象。）
話不多說，直接上代碼:
然后是css，這里我使用的是less
到這里就全部完成了，希望對大家有幫助！不足的希望大家能夠指出來！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88430.html
摘要：而列表項要包括內(nèi)容和刪除按鈕，內(nèi)容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過的。來判斷當(dāng)前是左滑還是右滑，左滑時在減小，而右滑時變大。并且記錄下當(dāng)前滑動的是第幾項。 最近做了一個類似系統(tǒng)操作的左滑刪除的demo，用的taro框架，和大家分享一下~首先需要考慮的有以下幾點：1）布局；2）判斷是左滑還是右滑，左滑時出現(xiàn)刪除，右滑時回歸原位；3）排他性，意思是某一個時間只...
摘要：而列表項要包括內(nèi)容和刪除按鈕，內(nèi)容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過的。來判斷當(dāng)前是左滑還是右滑，左滑時在減小，而右滑時變大。并且記錄下當(dāng)前滑動的是第幾項。 最近做了一個類似系統(tǒng)操作的左滑刪除的demo，用的taro框架，和大家分享一下~首先需要考慮的有以下幾點：1）布局；2）判斷是左滑還是右滑，左滑時出現(xiàn)刪除，右滑時回歸原位；3）排他性，意思是某一個時間只...
摘要：本文用到的組件這是一個簡單版仿微信的左滑刪除的組件左滑刪除組件地址倉庫地址問題在上，使用仿微信樣式的左滑刪除組件時如果這一行的背景色是透明的，就會出現(xiàn)如下問題透明的下可以看到刪除和編輯按鈕，我們就需要處理一下。 本文用到的組件： 這是一個簡單版仿微信的左滑刪除的組件： # 左滑刪除組件 left_scroll_actions: any pub地址：https://pub.dartlan...
摘要：，上層使用絕對定位，我們操縱屬性的值來實現(xiàn)像左移動。，我們通過微信小程序提供的對象和個有關(guān)手指觸摸的函數(shù)，，來實現(xiàn)隨手指移動。省略數(shù)據(jù)刪除部分中根據(jù)綁定的事件觸發(fā)刪除按鈕，用戶點擊刪除，發(fā)送請求，根據(jù)返回值對用戶進(jìn)行反饋。 導(dǎo)語 首先聲明兩點： 思路以及代碼，是根據(jù)資料進(jìn)行一些修改以及補(bǔ)充，原文地址在此 下面的只是 demo，各位根據(jù)自己的需要進(jìn)行修改完善 實現(xiàn)的思路摘抄如下 1...
閱讀 3295·2023-04-26 02:40
閱讀 4648·2021-09-22 15:22
閱讀 1586·2021-09-22 10:02
閱讀 3481·2021-08-11 10:23
閱讀 1392·2019-08-30 15:55
閱讀 2493·2019-08-30 12:48
閱讀 586·2019-08-30 11:04
閱讀 702·2019-08-29 16:29
