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