頁(yè)面布局如下：
<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">長(zhǎng)按3秒認(rèn)證你的跑者級(jí)別</p>
</div>
說(shuō)明：因?yàn)檫@里是長(zhǎng)按一張指紋圖片粮彤，移動(dòng)端長(zhǎng)按圖片會(huì)提示“保存圖片”根穷，雖然不影響跳轉(zhuǎn)，但是會(huì)誤導(dǎo)用戶导坟。所以這里用了一個(gè)div遮罩在圖片上屿良，但可能還是會(huì)提醒“選擇復(fù)制”，不過(guò)這種也不會(huì)誤導(dǎo)用戶啦惫周，畢竟確實(shí)是長(zhǎng)按了尘惧。
下面就是事件處理了，也很簡(jiǎn)單：
data () {
return {
timeOutEvent: 0 // 長(zhǎng)按事件定時(shí)器
}
},
methods: {
gtouchstart () {
// 開始觸摸
this.timeOutEvent = setTimeout(() => {
// 長(zhǎng)按3秒
this.timeOutEvent = 0
this.$router.push('/result')
}, 3000)
},
gtouchmove () {
// 看具體需求
// clearTimeout(this.timeOutEvent)
// this.timeOutEvent = 0
},
gtouchend () {
clearTimeout(this.timeOutEvent)
this.timeOutEvent = 0
}
}
簡(jiǎn)單的實(shí)現(xiàn)就不放demo鏈接了闯两，copy一下就可以測(cè)試了褥伴。
