vue長按事件touch實現代碼

3403771864 發布于2022-10-23 18:06 / 954人閱讀

　　1.touch事件

　　以下是四種touch事件

　　touchstart: //手指放到屏幕上時觸發

　　touchmove: //手指在屏幕上滑動式觸發

　　touchend: //手指離開屏幕時觸發

　　touchcancel: //系統取消touch事件的時候觸發，這個函數運用很少

　　2.長按彈出刪除按鈕，點擊刪除

　　<div v-for="item in list" @touchstart.native="showDeleteButton(item.id)" @touchend.native="clearLoop(item.id)">
　　內容...
　　</div>

　　showDeleteButton(e) {
　　clearTimeout(this.Loop); //再次清空定時器，防止重復注冊定時器
　　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()"

　　觸摸結束：

　　@touchend="touchOpen()"

　　使用示例：

歡迎大家關注更多精彩內容。

云服務器 GPU云服務器 touch事件長按-復制-代碼-js VUE實現webrtc Vue實現分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128199.html

無聊想實現一下vue的自定義事件，粗糙的效果，用來拋磚引玉

摘要：原理首先要理解的自定義事件。這樣子就好了直接預覽下效果，能正常調用，還行還行醬紫之后會不會好一點，寫的不好道友們輕噴背景是這樣子滴，有時候我們用vue框架的時候，要用到很多手勢，像tap、doubletap、longtap......，當然現在網上有很多手勢褲什么的，拿來改一下也是可以實現自己想要的效果滴，我是希望用vue 的時候類似于 {{msg}}－－－長按（longtap）點...

darkerXi 2019-08-22 10:44 評論0 收藏0
移動端VUE點擊、滑動和長按等事件處理（自定義指令）

摘要：問題移動設備上的觸摸事件如何利用它們三個來處理點擊長按滑動等操作，以及如何在測試用例中模擬它們的操作參考了實現方法上這位大哥的思路移動設備的點擊優化參考了感謝解決使用自定義指令來干這件事來記錄開始點擊的位置和時間，并在這里邊判斷長按操作來確問題：移動設備上的觸摸事件：touchstart、touchmove、touchend如何利用它們三個來處理點擊、長按、滑動等操作，以及如何在測...

niuxiaowei111 2019-08-22 15:38 評論0 收藏0
vue實現移動端拖拽懸浮按鈕

　　移動端拖拽懸浮按鈕如何用vue實現，下面看看具體內容：　　功能介紹：　　開發中，要考慮用戶體驗，懸浮按鈕不僅要顯示在側邊，更是可以允許隨意拖拽換位。　　需求描述：　　1、按鈕懸浮顯示在頁面側邊；　　2、當手指長按左鍵按鈕，即可允許拖拽改變位置；　　3、按鈕移動結束，手指松開，計算距離左右兩側距離并自動移動至側邊顯示；　　4、移動至側邊后，按鈕根據具體左右兩次位置判斷改變現實樣式；　　整體思路：...

3403771864 2022-09-13 21:29 評論0 收藏0
如何實現swipe、tap、longTap等自定義事件

摘要：分別存儲事件的定時器。事件定時器延時時間存儲事件對象滑動方向判斷我們根據下圖以及對應的代碼來理解滑動的時候方向是如何判定的。取消長按，以及取消所有事件取消長按取消所有事件方式都是類似，先調用取消定時器，然后釋放對應的變量，等候垃圾回收。前言移動端原生支持touchstart、touchmove、touchend等事件，但是在平常業務中我們經常需要使用swipe、tap、double...

羅志環 2019-08-22 15:02 評論0 收藏0