jingheng_H5/components/drag-button/drag-button.vue

<template>
	<view>
		<view
			id="_drag_button"
			class="drag"
			:style="'left: ' + left + 'px; top:' + top + 'px;'"
			@touchstart="touchstart"
			@touchmove.stop.prevent="touchmove"
			@touchend="touchend"
			:class="{transition: isDock && !isMove }"
		>
			<!-- #ifdef MP -->
			<button open-type="contact" class="button">
				按钮
			</button>
			<!--  #endif -->
			
			<!-- #ifndef MP -->
				<view class="drag-content">
					<text class="iconfont icon-shouye2" @click.stop.prevent="clickIndx"></text>
					<text class="iconfont icon-kefu1" @click.stop.prevent="clickService"></text>
				</view>
			<!--  #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'drag-button',
		props: {
			// 是否开启左右弹性效果
			isDock:{
				type: Boolean,
				default: true
			},
			// 页面底部是否存在tabbar
			existTabBar:{
				type: Boolean,
				default: false
			},
			end_bottom: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				top: 0,
				left: 0,
				width: 0,   // 按钮宽度
				height: 0,  // 按钮高度
				offsetWidth: 0,
				offsetHeight: 0,
				windowWidth: 0,  // 页面窗口宽度
				windowHeight: 0,  // 页面窗口高度
				isMove: true,  // 是否移动
				edge: 0,  // 上下边界
				// start_top: 200,
				// end_bottom: 60,
				start_left: 10,
				text: '按钮',
				pageUrl: '',
			}
		},
		mounted() {
			let pages = getCurrentPages()
			this.pageUrl = pages[pages.length - 1].route
			// console.log(this.pageUrl, 'ppp')
			const sys = uni.getSystemInfoSync();

			// 获取系统宽高
			this.windowWidth = sys.windowWidth;
			this.windowHeight = sys.windowHeight;
			
			// #ifdef APP-PLUS
				this.existTabBar && (this.windowHeight -= 50);
			// #endif
			if (sys.windowTop) {
				this.windowHeight += sys.windowTop;
			}
			
			const query = uni.createSelectorQuery().in(this);
			// 获取按钮节点信息
			query.select('#_drag_button').boundingClientRect(data => {
				this.width = data.width;
				this.height = data.height;
				this.offsetWidth = data.width / 2;
				this.offsetHeight = data.height / 2;

				// 按钮初始位置
				this.left = this.windowWidth - this.width - this.start_left;
				this.top = (this.windowHeight / 2) - (this.height / 2);
				// this.top = this.windowHeight - this.height - this.start_top;
				// console.log(data,this.left,this.top,this.offsetHeight,this.height,this.width,this.start_left,this.start_top,sys, 'youzhi-------')
			}).exec();
		},
		methods: {
			// 跳转到首页
			clickIndx() {
				uni.reLaunch({
					url:'/pages/index/index'
				})
				this.$emit('topClick');
			},
			// 跳转到客服页
			clickService() {
				if(this.pageUrl == 'newOtherPages/myService/myService') {
					uni.redirectTo({
						url:"/newOtherPages/myService/myService"
					})
				}else {
					uni.navigateTo({
						url:"/newOtherPages/myService/myService"
					})
				}

				this.$emit('botClick');
			},
			click() {
				this.$emit('btnClick');
			},
			// 触摸开始
			touchstart() {
				this.$emit('btnTouchstart');
			},
			// 触摸移动
			touchmove(e) {
				// 单指触摸
				if (e.touches.length !== 1) {
					return false;
				}
				
				this.isMove = true;
				
				// 移动过程,按钮的位置
				this.left = e.touches[0].clientX - this.offsetWidth;
				
				let clientY = e.touches[0].clientY - this.offsetHeight;
				// #ifdef H5
					// clientY += this.height; // 移动时悬停的位置
				// #endif
				let edgeBottom = this.windowHeight - this.height - this.edge - this.end_bottom;

				// 上下触及边界
				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 + 10;
					} else {
						this.left = edgeRigth - 10;
					}
					
				}
				
				this.isMove = false;
				
				this.$emit('btnTouchend');
			},
		}}
</script>

<style lang="scss">
	.drag {
		display: flex;
		justify-content: center;
		align-items: center;
		color: $uni-text-color-inverse;
		width: 72rpx;
		height: 144rpx;
		border-radius: 50%;
		font-size: $uni-font-size-sm;
		position: fixed;
		z-index: 9999999;
		
		button {
		  background: none;
		  border: none;
		  width: 100%;
		  height: 100%;
		  font-size: 24rpx;
		  padding: 0;
		  margin: 0;
		  display: flex;
		  border-radius: 50%;
    }
		
		&.transition {
			transition: left .3s ease,top .3s ease;
		}
	}
	.drag-content{
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 4rpx;
		.iconfont {
			font-size: 40rpx;
			color: #D8F8EC;
      text-align: center;
			height: 50%;
			width: 100%;
			line-height: 72rpx;
		}
		.icon-kefu1 {
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		}
	}
	
</style>