Vue 绑定使用 touchstart touchmove touchend[通俗易懂]

全栈程序员站长

发布于 2022-09-06 19:47:13

1.4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

今天要做一个页面div长按后触发事件，简单学习后实现如下： 先看代码：

<template>
  <div>

    <div class="test" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">试一试呀!</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        
    }
  },
    methods:{
        gtouchstart(){
            window.console.log('1，按下啦啦啦啦啦')
            
        },
        gtouchmove(){
            window.console.log('2，按下并且在移动呢')
        },
        gtouchend(){
            window.console.log('3，松开啦啦啦啦啦')
        }
    }
}
</script>
<style scoped>
    .test{
        width: 100%;
        height: 50px;;
        text-align: center;
        background-color: red;
        line-height: 50px;
        font-size: 50px;
    }
 
</style>

看结果：