uni-app双击事件的实现

<template>
	<view>
		<button @touchend="dbclick">测测测</button>
		<button type="default" @click="db">试一试</button>
		<button type="default" @click="d">测试</button>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				touchNum: 0,
				time: [],
				index: 0,
				start_time: 0,
				end_time: 0
			}
		},
		methods: {
			dbclick() {
				this.touchNum++
				setTimeout(() => {
					if (this.touchNum == 1) {
						console.log('单击')
					}
					if (this.touchNum >= 2) {
						console.log('双击')
					}
					this.touchNum = 0
				}, 250)
			},
			/// 双击
			db(e) {
				this.time.push(e.timeStamp)
				var t = this.time[this.time.length - 1] - this.time[this.time.length - 2]
				console.log(this.time[this.time.length - 1] - this.time[this.time.length - 2])
				if (t < 1000) {
					console.log('双击了')
				} else {
					console.log('单机了');
				}
			},
			//双击
			d() {
				this.index = this.index == 0 ? 1 : this.index + 1;
				if (this.index == 1) {
					this.start_time = new Date().getTime();
					setTimeout(() => {
						this.index = this.start_time = this.end_time = 0;
					}, 200)
				} else if (this.index == 2) {
					this.end_time = new Date().getTime();
					if (this.end_time - this.start_time < 300) {
						console.log('双击');
					}
					this.index = this.start_time = this.end_time = 0;
				}
			}
		}
	}
</script>
 
<style>
 
</style>
————————————————
版权声明:本文为CSDN博主「强直也要学编程」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_52374211/article/details/117233505


    Danzel
    Danzel管理员

    • 声明:本文由Danzel于2021-11-30转载(优化),转载须经原站同意并注明出处。
    • 本文地址:http://maryd.cn/?id=206
    上一篇:如何连接到用于 Qlik Sense 存储库的 PostgreSQL 数据库
    下一篇:Sublime Text 4 Build 4121 注册

    留言评论

    暂无留言
    取消
    扫码支持