页面布局如下:
<div class="content">
<img class="zhiwen" src="./../assets/images/zhiwen.png"/>
<div class="zhiwen-mask" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()"></div>
<p class="tips">长按3秒认证你的跑者级别</p>
</div>
说明:因为这里是长按一张指纹图片,移动端长按图片会提示“保存图片”,虽然不影响跳转,但是会误导用户。所以这里用了一个div遮罩在图片上,但可能还是会提醒“选择复制”,不过这种也不会误导用户啦,毕竟确实是长按了。
下面就是事件处理了,也很简单:
data () {
return {
timeOutEvent: 0 // 长按事件定时器
}
},
methods: {
gtouchstart () {
// 开始触摸
this.timeOutEvent = setTimeout(() => {
// 长按3秒
this.timeOutEvent = 0
this.$router.push('/result')
}, 3000)
},
gtouchmove () {
// 看具体需求
// clearTimeout(this.timeOutEvent)
// this.timeOutEvent = 0
},
gtouchend () {
clearTimeout(this.timeOutEvent)
this.timeOutEvent = 0
}
}
简单的实现就不放demo链接了,copy一下就可以测试了。