扫描拖拽-兼容APP

src/mycomponents/scan/winScanButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view class="scan_float" ref="scanRef" @click="goScan('bottom')" @touchstart="handleTouchStart" @touchmove.prevent="handleTouchMove">
+		<view class="scan_float" :style="{left:viewLeft,top:viewTop}" ref="scanRef" @click="goScan('bottom')" @touchstart="handleTouchStart" @touchmove.prevent="handleTouchMove">
 			<image src="@/static/icons_ui/icon_scan_white.svg"></image>
 			<view>扫描</view>
 		</view>
@@ -22,6 +22,8 @@
 				},
 				btnX:20,
 				btnY:20,
+				viewLeft:'auto',
+				viewTop:'auto',
 			}
 		},
 		props: {
@@ -38,8 +40,15 @@
 			},
 			handleTouchMove(e) {
 				console.log("handleTouchMove",e);
-				this.$refs.scanRef.$el.style.left = e.changedTouches[0].clientX-this.btnX+'px'
+				// this.$refs.scanRef.$el.style.left = e.changedTouches[0].clientX-this.btnX+'px'
-				this.$refs.scanRef.$el.style.top = e.changedTouches[0].clientY-this.btnY+'px'		
+				// this.$refs.scanRef.$el.style.top = e.changedTouches[0].clientY-this.btnY+'px'
+				this.viewLeft = e.changedTouches[0].clientX-this.btnX+'px'
+				this.viewTop = e.changedTouches[0].clientY-this.btnY+'px'
+				// const query = uni.createSelectorQuery().in(this)
+				// console.log('scanRef',query.select("#scanRef"))
+				// query.select("#scanRef").boundingClientRect((data=>{
+				// 	console.log('得到的位置信息',data)
+				// })).exec();		
 			},
 
 			goScan(content) {