資訊專欄INFORMATION COLUMN
1.touch事件
以下是四種touch事件
touchstart: //手指放到屏幕上時觸發(fā)
touchmove: //手指在屏幕上滑動式觸發(fā)
touchend: //手指離開屏幕時觸發(fā)
touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)，這個函數(shù)運用很少
2.長按彈出刪除按鈕，點擊刪除
<div v-for="item in list" @touchstart.native="showDeleteButton(item.id)" @touchend.native="clearLoop(item.id)"> 內(nèi)容... </div>
showDeleteButton(e) {
clearTimeout(this.Loop); //再次清空定時器，防止重復(fù)注冊定時器
this.Loop = setTimeout(function() {
this.$dialog.confirm({ //這是個彈出框，用的ydui
title: '溫馨提示',
mes: '是否刪除此條消息',
opts: () => {
this.$dialog.loading.open('刪除中...');
this.$http.post(this.$store.state.ip + '...', {
id: e
}, {
headers: {},
}).then((response) => {
this.$dialog.loading.close();
this.$dialog.toast({
mes: response.body.info,
timeout: 1000
});
var data = this.rulist
console.log(data)
for(var i in data) {
if(data[i].id == e) {
data.splice(i, 1)
}
}
console.log(data)
this.rulist=data
}).catch(function(response) {
});
}
});
}.bind(this), 1000);
},
clearLoop(e) {
clearTimeout(this.Loop);
},補充：下面看下Vue長按觸摸事件
開始觸摸：
@touchstart="touchClose()"
觸摸結(jié)束：
@touchend="touchOpen()"
使用示例：
歡迎大家關(guān)注更多精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128199.html
摘要：原理首先要理解的自定義事件。這樣子就好了直接預(yù)覽下效果，能正常調(diào)用，還行還行醬紫之后會不會好一點，寫的不好道友們輕噴 背景 是這樣子滴，有時候我們用vue框架的時候，要用到很多手勢，像tap、doubletap、longtap......，當(dāng)然現(xiàn)在網(wǎng)上有很多手勢褲什么的，拿來改一下也是可以實現(xiàn)自己想要的效果滴，我是希望用vue 的時候類似于 {{msg}}－－－長按（longtap）點...
摘要：問題移動設(shè)備上的觸摸事件如何利用它們?nèi)齻€來處理點擊長按滑動等操作，以及如何在測試用例中模擬它們的操作參考了實現(xiàn)方法上這位大哥的思路移動設(shè)備的點擊優(yōu)化參考了感謝解決使用自定義指令來干這件事來記錄開始點擊的位置和時間，并在這里邊判斷長按操作來確 問題： 移動設(shè)備上的觸摸事件：touchstart、touchmove、touchend如何利用它們?nèi)齻€來處理點擊、長按、滑動等操作，以及如何在測...
移動端拖拽懸浮按鈕如何用vue實現(xiàn)，下面看看具體內(nèi)容： 功能介紹： 開發(fā)中，要考慮用戶體驗，懸浮按鈕不僅要顯示在側(cè)邊，更是可以允許隨意拖拽換位?！ ⌒枨竺枋觯骸 ?、按鈕懸浮顯示在頁面?zhèn)冗?； ?、當(dāng)手指長按左鍵按鈕，即可允許拖拽改變位置； 3、按鈕移動結(jié)束，手指松開，計算距離左右兩側(cè)距離并自動移動至側(cè)邊顯示； 4、移動至側(cè)邊后，按鈕根據(jù)具體左右兩次位置判斷改變現(xiàn)實樣式； 整體思路：...
摘要：分別存儲事件的定時器。事件定時器延時時間存儲事件對象滑動方向判斷我們根據(jù)下圖以及對應(yīng)的代碼來理解滑動的時候方向是如何判定的。取消長按，以及取消所有事件取消長按取消所有事件方式都是類似，先調(diào)用取消定時器，然后釋放對應(yīng)的變量，等候垃圾回收。 前言 移動端原生支持touchstart、touchmove、touchend等事件，但是在平常業(yè)務(wù)中我們經(jīng)常需要使用swipe、tap、double...
閱讀 596·2023-03-27 18:33
閱讀 790·2023-03-26 17:27
閱讀 684·2023-03-26 17:14
閱讀 645·2023-03-17 21:13
閱讀 573·2023-03-17 08:28
閱讀 1895·2023-02-27 22:32
閱讀 1376·2023-02-27 22:27
閱讀 2280·2023-01-20 08:28
