uni-app 控件拖拽

最新推荐文章于 2025-03-25 15:42:30 发布

原创

最新推荐文章于 2025-03-25 15:42:30 发布

· 2.6k 阅读

5 ·

版权

文章标签：

#小程序

本文介绍了一个Vue组件，展示如何使用触摸事件和CSS动画来实现一个底部固定、可拖动的扫描图标。开发者通过touchstart、touchmove和touchend事件处理滑动，确保图标在屏幕范围内平移。适合了解前端交互和触控响应的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div @click="$emit('navigate')" class="scan" :style="'transform: translate('+ x +'px,' + y +'px);'" @touchstart="touchS"
		@touchmove.stop.prevent="touchM" @touchend="touchE">
		<uni-icons class="icon" type="scan" color="#fff" size="30"></uni-icons>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isC: false,
				start: {
					left: 0,
					top: 0
				},
				x: 0,
				y: 0,
				oldx: 0,
				oldy: 0,
				screenHeight: 667,
				screenWidth: 375
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight - 30;
					this.screenWidth = res.screenWidth - 30;
				}
			});
		},
		methods: {
			touchS(val) {
				this.isMove = true
				this.start.left

最低0.47元/天解锁文章