按钮拖拽

pages/squareDynamic/index.vue

@@ -46,7 +46,15 @@
 			  <image mode="aspectFill" src="@/static/empty.png" alt="暂无动态" />
 			  <view>暂无动态</view>
 			</view>
-			<view class="publish" @click="publish">
+			<view
+				id="publish"
+				class="publish"
+				:style="{'left': left === 0 ? '626rpx' : left + 'px', 'top': top === 0 ? 'calc(100% - 300rpx)' : top + 'px'}"
+				@touchmove.stop.prevent="touchmove"
+				@touchend="touchend"
+				@click="publish"
+				:class="{transition: !isMove }"
+			>
 				<image src="/static/publish.png" mode="aspectFill"></image>
 				<text>发布</text>
 			</view>
@@ -58,6 +66,8 @@
 	import * as Api from '@/api/squareDynamic/index.js'
 	
 	export default {
+		components: {
+		},
 		data() {
 			return {
 				tabList: ['推荐', '精选', '晒单', '日常', '文章'],
@@ -88,6 +98,16 @@
 				loading: false,
 				finished: false,
 				showFullCont: [],
+				top:0,
+				left:0,
+				width: 0,
+				height: 0,
+				offsetWidth: 0,
+				offsetHeight: 0,
+				windowWidth: 0,
+				windowHeight: 0,
+				isMove: true,
+				edge: 20,
 			};
 		},
 		watch: {
@@ -104,8 +124,20 @@
 				frontColor: '#000000',
 				backgroundColor: '#E7F1FC',
 			});
-			console.log(this.dynamicList, this.dynamicList[0]);
 			this.getDynamicList();
+			const sys = uni.getSystemInfoSync();
+			this.windowWidth = sys.windowWidth;
+			this.windowHeight = sys.windowHeight;
+			if (sys.windowTop) {
+				this.windowHeight += sys.windowTop;
+			}
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#publish').boundingClientRect(data => {
+				this.width = data.width;
+				this.height = data.height;
+				this.offsetWidth = data.width / 2;
+				this.offsetHeight = data.height / 2;
+			}).exec();
 		},
 		methods: {
 			async getDynamicList() {
@@ -203,6 +235,69 @@
 					url: '/pages/squareDynamic/publish',
 				})
 			},
+			spred(e){
+				const animation = uni.createAnimation({
+					duration: 200,
+					timingFunction: 'ease',
+				});
+				this.animationData = animation.export();
+				
+				if(this.isShow){
+					animation.rotate(135).step();
+				}
+				else{
+					animation.rotate(0).step();
+				}
+				this.animationData = animation.export();
+			},
+			touchmove(e) {
+				// 单指触摸
+				if (e.touches.length !== 1) {
+					return false;
+				}
+				this.isMove = true;
+				this.isShow=false
+				this.spred()
+				this.left = e.touches[0].clientX - this.offsetWidth;
+				let clientX = e.touches[0].clientX;
+				let clientY = e.touches[0].clientY - this.offsetHeight;
+				let edgeBottom = this.windowHeight - this.height - this.edge;
+				// 左右触及边界
+				if (clientX < this.edge) {
+					this.left = this.edge;
+				} else if (clientX > this.windowWidth - this.offsetWidth - this.edge) {
+					this.left = this.windowWidth - this.width - this.edge;
+				} else {
+					this.left = clientX - this.offsetWidth;
+				}
+				// 上下触及边界
+				if (clientY < this.edge) {
+					this.top = this.edge;
+				} else if (clientY > edgeBottom) {
+					this.top = edgeBottom;
+				} else {
+					this.top = clientY
+				}
+				
+			},
+			touchend(e) {
+				if (this.isDock) {
+					let edgeRigth = this.windowWidth - this.width - this.edge;
+					
+					if (this.left < this.windowWidth / 2 - this.offsetWidth) {
+						this.left = this.edge;
+					} else {
+						this.left = edgeRigth;
+					}
+					if(this.left>200){
+						this.postitionName=false
+					}else{
+						this.postitionName=true
+					}
+				}
+				
+				this.isMove = false;
+			},
 		},
 	};
 </script>
@@ -356,8 +451,8 @@
 			}
 			.publish {
 				position: fixed;
-				right: 24rpx;
-				bottom: 140rpx;
+				left: 626rpx;
+				top: calc(100% - 300rpx);
 				width: 100rpx;
 				height: 100rpx;
 				background: #F34A40;