抖音小程序的拖拽

最新推荐文章于 2024-09-14 16:14:40 发布

斤斤丶

最新推荐文章于 2024-09-14 16:14:40 发布

阅读量399

点赞数

分类专栏： uniapp 小程序拖拽文章标签： vue 小程序 css3

本文链接：https://blog.csdn.net/jinxinlive/article/details/109101885

版权

uni-app 字节跳动小程序拖拽 touch事件 CSS transform

关键词由CSDN通过智能技术生成

uniapp 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

小程序

1 篇文章 0 订阅

订阅专栏

拖拽

1 篇文章 0 订阅

订阅专栏

微信小程序拖拽有movable-view，但是在字节跳动小程序上面不能用。下面的是用uni写的在字节跳动小程序拖拽的方法，直接上代码：

<template>
	<view class="content">
		<view class="drag"
		 :style="{
			 transform: `translate(${drag.offsetX}px, ${drag.offsetY}px)`,
			 MsTransform: `translate(${drag.offsetX}px, ${drag.offsetY}px)`,
			 MozTransform: `translate(${drag.offsetX}px, ${drag.offsetY}px)`,
			 WebkitTransform: `translate(${drag.offsetX}px, ${drag.offsetY}px)`,
			 OTransform: `translate(${drag.offsetX}px, ${drag.offsetY}px)`,
			 transition: drag.move ? 'none' : 'transform 0.2s ease-in-out',
			 MsTransition: drag.move ? 'none' : 'transform 0.2s ease-in-out',
			 MozTransition: drag.move ? 'none' : 'transform 0.2s ease-in-out',
			 WebkitTransition: drag.move ? 'none' : 'transform 0.2s ease-in-out',
			 OTransition: drag.move ? 'none' : 'transform 0.2s ease-in-out'
		 }"
		 @touchstart="touchstartItem" @touchmove.stop.prevent="touchmoveItem" @touchend="touchendItem">
			
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				drag:{
					move:false,
					initX:0,
					initY:0,
					offsetX:0,
					offsetY:0
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			touchstartItem(e){
				let drag=this.drag
				drag.move=true
				let dot=e.changedTouches[0]
				drag.initX=dot.pageX-drag.offsetX
				drag.initY=dot.pageY-drag.offsetY
			},
			touchmoveItem(e){
				let drag=this.drag
				if(!drag.move) return
				let dot=e.changedTouches[0]
				drag.offsetX=dot.pageX-drag.initX
				drag.offsetY=dot.pageY-drag.initY
			},
			touchendItem(e){
				let drag=this.drag
				let dot=e.changedTouches[0]
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		width: 100%;
		padding-top: 100rpx;
		height: 100vh;
		box-sizing: border-box;
		position: relative;
		 .drag{
			display: block;
			width: 200rpx;
			height: 200rpx;
			background-color: #ff6700;
			position: relative;
		}
	}

</style>