uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边

uni-app 微信小程序实现全屏客服按钮可拖动,自动吸附边缘

上一篇更新了uni-app 微信小程序实现全屏客服按钮可随意拖动 ,后来优化了一下这个按钮,可以拖动功能,并且可以自然吸附在手机页面的边缘,下面就来一起分享一下吧。

效果图如下:

大致效果如上图,下面是实现的代码:

<movable-area class="movableArea">
	<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction" :damping="damping"
	 @change="onChange" @touchend="onTouchend">
		<image src="../../static/kefu03.png" mode="widthFix" class="iconImage"></image>
		<button open-type='contact' session-from='' class="contact">联系我们</button>
	</movable-view>
</movable-area>

JS 代码如下:

    export default {
		data() {
			return {
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				}
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		mounted() {
			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;
					}, 1000)
				}
			})
		},
		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)
			},
		}
	}

CSS:


.movableArea {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素
	z-index: 999;

	.movableView {
		pointer-events: auto; //可以点击
		width: 120rpx;
		height: 120rpx;
		padding: 10rpx;
		border-radius: 100%;
		border: 2px solid #f8931f;
		.iconImage {
			display: block;
			width: 120rpx;
			height: 120rpx;
			// animation: iconImage 5s linear infinite;
		}
		@keyframes iconImage{
		  0%{-webkit-transform:rotate(0deg);}
		  25%{-webkit-transform:rotate(90deg);}
		  50%{-webkit-transform:rotate(180deg);}
		  75%{-webkit-transform:rotate(270deg);}
		  100%{-webkit-transform:rotate(360deg);}
		}

		// 客服
		.contact {
			width: 50px;
			height: 50px;
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			border-radius: 100%;
			opacity: 0;
		}

	}
}

以上代码即可实现全屏客服按钮可拖动,自动吸边。

—— 微信小程序学习资源下载—–

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程,小月博客持续更新…

 

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?