<van-grid :column-num="2" class="content" :border="false" >
<van-grid-item class="box" v-for="(item2,index2) in list" :key="index2" >
<div class="inner-box" v-if="!item2.isBack" @touchstart="touchstartevent(item2,index2)" @touchmove="touchmoveevent(item2,index2)" @touchend="touchendevent(item2,index2)" >
<span>正面</span>
</div>
<div class="inner-box-back" @click.stop="deleteModel(item2,index2)" v-else> <span>删除</span> </div>
</van-grid-item>
</van-grid>
// 模板长按删除功能
touchstartevent(item,index){
this.closeDeleteevent()//清除删除图标事件
var self = this;
this.timeoutEvent = 0;
this.timeoutEvent = setTimeout(() => {
self.enterLongevent(item,index);//长按执行的操作
},1000)
},
enterLongevent(item,index){
item.isBack = true;
console.log("长按了呀")
},
touchmoveevent(item,index){
console.log("移动了")
clearTimeout(this.timeoutEvent)
this.timeoutEvent = 0;
},
touchendevent(item,index){
console.log("离开屏幕")
clearTimeout(this.timeoutEvent)
this.timeoutEvent = 0;
},
.inner-box{
width: 100%;
border-radius: 10px;
border: 1px solid #f2f2f2;
-webkit-touch-callout: none!important;
-webkit-user-select: none!important;
-moz-user-select:none;
-ms-uese-select:none;
user-select: none;
animation: mymoveone 0.5s ease-in-out;
}
@keyframes mymoveone{
from{
opacity: 0;
transform: rotateY(90deg);
}
to{
opacity: 1;
transform: rotateY(0);
}
}
.inner-box-back{
width: 100%;
height: 99px;
animation: mymove 0.5s ease-in-out;
border-radius: 10px;
border: 1px solid #f2f2f2;
background: fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: #333333;
}
@keyframes mymove{
from{
opacity: 0;
transform: rotateY(-90deg);
}
to{
opacity: 1;
transform: rotateY(0);
}
}
效果：
暂时无法显示
