uniapp实现支付宝可拖曳的智能客服按钮

示例代码如下：

<template>
	<movable-area class="ai-button-container">
		<!-- #ifdef MP-ALIPAY -->
		<movable-view class="ai-box" :class="{'transparent':isShow==false}" :position="position" :x="x" :y="y" direction="all" damping="10" @change="onChange" @touchend="onTouchend">
			<view class="btn">
				<contact-button :tnt-inst-id="tntInstId" :scene="scene" icon=""/>
			</view>
		</movable-view>
		<!-- #endif -->
	</movable-area>
</template>

<script>
	export default {
		props:{
		},
		data() {
			return {
				tntInstId:'',
				scene:'',
				position:4,
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				isShow:false
			}
		},
		mounted() {
			this.tntInstId = this.$tntInstId
			this.scene = this.$scene
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
						//是否显示，在调整位置后显示
						this.isShow = true
					}, 0)
				}
			})
		},
		onShow() {
		},
		methods:{
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				// 吸边
				// setTimeout(() => {
				// 	if (this.move.x < this.x2 / 2) this.x = this.x1;
				// 	else this.x = this.x2;
				// 	console.log(this.x, this.y)
				// }, 100)
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.ai-button-container {
		// width: 100%;
		// height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
		.transparent {
			opacity:0;
		}
		.ai-box {
			pointer-events: auto; //可以点击
			width: 70upx;
			height: 70upx;
			.btn {
				width: 80upx;
				height: 80upx;
				background-image: url(../../static/img/ai.jpg);
				border-radius: 50%;
				background-size: 100% 100%;
				/deep/ contact-button {
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}
	/* 适配iphonex 有底部横条的 */
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.fixed-box {
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
		}
	}
	
</style>