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