最近公司提了一个需求,需要长按添加删除按钮,我以下为大家写一个简单的长按事件,拿走就能应用到你的项目中。以为我们公司还要点击的话还要跳一个页面,在div中又添加了一个click事件,长按不跳转,反之跳转。 

 

<div class="weui_cell" v-for="(item,index) in labelList" @touchstart="showDeleteButton(item.id)" @click="labelDetails(item.id)">
      内容
</div>

// 或者这样
<div class="weui_cell" v-for="(item,index) in labelList" @touchstart="showDeleteButton(item.id)" @touchend="emptyTime">
      内容
</div>
在data中声明变量,用来清空定时器
data:{
    Loop:null,
},
在方法中将以下方法复制过去即可应用。
showDeleteButton:function (e) {
    clearTimeout(this.Loop); //再次清空定时器,防止重复注册定时器
    this.Loop = setTimeout(function() {
        alert("长按了")
    }.bind(this), 1000);
},
//清空
emptyTime:function () {
    clearTimeout(this.Loop); //清空定时器,防止重复注册定时器
},
手机浏览器中,长按可选中文本,在项目中出现这种现象,会很难受最好还是禁用此功能为上。* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}


这样一个简单的长按事件就写好了,如果想要更多问题请关注我,谢谢大家支持!!!

Logo

前往低代码交流专区

更多推荐