![\"\"](\"images\/Pasted%20image%2020230415091447.png\")
<\/p>\n\u80cc\u666f\uff1a<\/p>\n
\u667a\u6167\u517b\u6b96\u79fb\u52a8\u7aef\u8868\u683c\u9875\u6709\u6dfb\u52a0\u529f\u80fd\uff0c\u4f46\u662f\u5f53\u5217\u8868\u5f88\u957f\u65f6\u6309\u94ae\u4f1a\u906e\u6321\u6570\u636e\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n
<\/p>\n
\u6240\u4ee5\u5c31\u9700\u8981\u652f\u6301\u62d6\u52a8\uff0c\u540c\u65f6\u9700\u8981\u4e00\u4e2a\u5438\u8fb9\u7684\u6548\u679c\uff1a<\/p>\n
\u4ece\u4e00\u4e2a\u4f4d\u7f6e\u79fb\u52a8\u5230\u53e6\u4e00\u4e2a\u4f4d\u7f6e\uff0c\u5b9e\u65f6\u66f4\u6539\u5143\u7d20\u7684\u4f4d\u7f6e \ud83e\udd37\n<\/code><\/pre>\n\u79fb\u52a8<\/h3>\n
![\"\"](\"images\/Pasted%20image%2020230415094957.png\")
<\/p>\n
<template>\n\u00a0 <view id="app">\n\u00a0 \u00a0 <view class="move-button" @touchmove="handleTouchMove" :style="[style]"><\/div>\n\u00a0 <\/view>\n<\/template>\n<script>\nexport default {\n\u00a0 name: 'App',\n\u00a0 data() {\n\u00a0 \u00a0 return {\n\u00a0 \u00a0 \u00a0 style: {},\n\u00a0 \u00a0 };\n\u00a0 },\n\u00a0 methods: {\n\u00a0 \u00a0 handleTouchMove(e) {\n\u00a0 \u00a0 \u00a0 console.log(e);\n\u00a0 \u00a0 \u00a0 const { clientX, clientY } = e.touches[0];\n\u00a0 \u00a0 \u00a0 this.style = {\n\u00a0 \u00a0 \u00a0 \u00a0 left: `${clientX}px`,\n\u00a0 \u00a0 \u00a0 \u00a0 top: `${clientY}px`,\n\u00a0 \u00a0 \u00a0 };\n\u00a0 \u00a0 },\n\u00a0 },\n};\n<\/script>\n<style>\n.move-button {\n\u00a0 position: absolute;\n\u00a0 top: 200px;\n\u00a0 right: 0;\n\u00a0 width: 200px;\n\u00a0 height: 200px;\n\u00a0 background-color: blue;\n}\n<\/style>\n<\/code><\/pre>\n\u4ee5\u4e0a\u4ee3\u7801\u57fa\u672c\u662f\u53ef\u4ee5\u79fb\u52a8\u5143\u7d20\uff0c\u4f46\u662f\u6709\u4e2a\u660e\u663e\u7684\u95ee\u9898\uff0c\u5f53\u5f00\u59cb\u79fb\u52a8\u7684\u77ac\u95f4\u5143\u7d20\u4f1a\u8df3\u52a8\u4e00\u4e0b\uff1a<\/p>\n
![\"\"](\"images\/CPT2304151041-876x613.gif\")
<\/p>\n
\u539f\u56e0\u662f\uff1a\u79fb\u52a8\u65f6\u83b7\u53d6\u7684\u5750\u6807\u8d4b\u503c\u7ed9\u7684\u662f\u5143\u7d20\u7684\u5de6\u4e0a\u89d2\u5750\u6807<\/strong> \u3002<\/p>\n\u90a3\u5982\u4f55\u548c\u5904\u7406\uff1f<\/h4>\n
\u6211\u4eec\u53ea\u8981\u8bbe\u7f6e\u7684\u4f4d\u7f6e\u4e0d\u662f\u5143\u7d20\u5de6\u4e0a\u89d2\uff0c\u800c\u662f\u8bbe\u7f6e\u5143\u7d20\u7684\u62d6\u52a8\u70b9\u5c31\u884c\u3002\u5b9e\u9645\u662f\u4e0d\u80fd\u8bbe\u7f6e\u5143\u7d20\u5185\u67d0\u4e2a\u70b9\u7684\u4f4d\u7f6e\uff0c\u6211\u4eec\u9700\u8981\u53d8\u901a\u4e0b\u3002\u6211\u4eec\u53d1\u73b0\u62d6\u52a8\u5143\u7d20\u65f6\uff0c\u62d6\u52a8\u70b9\u548c\u5143\u7d20\u7684\u5de6\u4e0a\u89d2\u7684\u4f4d\u7f6e\u4e4b\u95f4\u7684\u5dee\u662f\u4e0d\u53d8\u7684\uff1a<\/p>\n
![\"\"](\"images\/Pasted%20image%2020230415105610.png\")
<\/p>\n
\u53ea\u8981\u5728\u62d6\u52a8\u5f00\u59cb\u65f6\uff0c\u83b7\u5f97\u5143\u7d20\u5de6\u4e0a\u89d2\u7684\u4f4d\u7f6e\uff08posX,posY\uff09\u4ee5\u53ca\u62d6\u52a8\u70b9\u7684\u8d77\u59cb\u4f4d\u7f6e\uff08startX,startY\uff09\u7136\u540e x\uff0cy \u65b9\u5411\u76f8\u51cf\uff1a<\/p>\n
const diffX = startX - posX,\n diffY = startY - posY\n<\/code><\/pre>\n\u83b7\u53d6\u5143\u7d20\u7684\u4fe1\u606f\uff1a<\/p>\n
getElementInfo(selector){ \n let view = uni.createSelectorQuery().in(this).select(selector) \n \n return new Promise((resolve, reject)=>{ \n view.boundingClientRect(data => { \n resolve({ \n top:data.top, \n right:data.right, \n bottom:data.bottom, \n left:data.left, \n width:data.width, \n height:data.height, \n }) \n }).exec(); \n }) \n \n}\n<\/code><\/pre>\nhandleTouchStart(e){\n this.elemInfo = await this.getElementInfo('.add-img') \n const {clientX,clientY} = e.touches[0] \n this.diffX = clientX - this.elemInfo.left \n this.diffY = clientY - this.elemInfo.top\n}\n<\/code><\/pre>\n\u4fee\u6539 handleTouchMove<\/code> :<\/p>\n handleTouchMove(e) {\n console.log(e);\n const { clientX, clientY } = e.touches[0];\n this.moveX = clientX - this.diffX\n this.moveY = clientY - this.diffY\n this.setButtonPosition()\n },\n setButtonPosition(){\n this.style = { \n left:this.moveX + 'px', \n top:this.moveY + 'px' \n } \n }\n<\/code><\/pre>\n\u5438\u8fb9<\/h3>\n
\u539f\u7406\uff1a\u5f53\u5143\u7d20\u7684\u4e2d\u5fc3\u70b9\u4f4d\u7f6e\u5c0f\u4e8e\u9875\u9762\u5bbd\u5ea6\u4e00\u534a\u65f6\uff0c\u5438\u9644\u5230\u5de6\u8fb9\uff0c\u53cd\u4e4b\u5438\u9644\u5230\u53f3\u8fb9<\/strong> \u3002<\/p>\n\u62d6\u52a8\u505c\u6b62\u540e\uff0c\u6839\u636e\u4e0a\u8ff0\u539f\u7406\u8bbe\u7f6e x \u7684\u5750\u6807\uff1a<\/p>\n
suctionSide(){ \n const halfWidth = this.pageWidth\/2 \n const elemCenterPointX = this.moveX + this.elemInfo.width\/2 \n if(elemCenterPointX < halfWidth){ \n \/\/ \u6309\u94ae\u4e2d\u5fc3\u70b9\u4f4d\u7f6e\u5c0f\u4e8e\u4e00\u534a\uff0c\u5438\u9644\u5230\u5de6\u8fb9 \n this.moveX = 0 \n }else{ \n \/\/ \u6309\u94ae\u4e2d\u5fc3\u70b9\u4f4d\u7f6e\u5927\u4e8e\u4e00\u534a\uff0c\u5438\u9644\u5230\u53f3\u8fb9 \n this.moveX = this.pageWidth - this.elemInfo.width \n } \n this.setButtonPosition() \n}\n<\/code><\/pre>\n\u83b7\u53d6\u9875\u9762\u5bbd\u5ea6\uff1a<\/p>\n
uni.getSystemInfo({ \n success:res=>{ \n console.log(res) \n this.pageWidth = res.windowWidth \n } \n})\n<\/code><\/pre>\n\u672a\u5b8c\u5f85\u7eed…<\/p>\n
\u53c2\u8003\uff1a<\/p>\n